[SUI] OutlineGroup

Cuando se usa un List para implementar una lista jerárquica con niveles anidados, en realidad se usa por detrás un componente llamado OutlineGroup que sirve para pintar una estructura con forma de árbol (e.g. Item):

struct Item: Identifiable {
  let id = UUID()
  let name: String
  var misH_iJoS: [Item]?
}

struct ContentView: View {
  @State var items: [Item] = [
    .init(name: "Carros", misH_iJoS: [
      .init(name: "Toyota", misH_iJoS: [
        .init(name: "Modelo 1"),
        .init(name: "Modelo 2"),
        .init(name: "Modelo 3"),
      ]),
      .init(name: "Nissan"),
      .init(name: "Mazda", misH_iJoS: [
        .init(name: "Modelo 1"),
        .init(name: "Modelo 2"),
      ])
    ]),
    .init(name: "Libros"),
    .init(name: "Profesiones", misH_iJoS: [
      .init(name: "Cocinero"),
      .init(name: "Secretario"),
      .init(name: "Estudiante")
    ])
  ]

  var body: some View {
    NavigationStack {
      OutlineGroup(items, children: \.misH_iJoS) {
        Text($0.name)
      }
    }
  }
}

Al meter el OutlineGroup dentro de un List se obtiene el aspecto de una lista jerárquica:

struct ContentView: View {
  @State var items: [Item] = [
    .init(name: "Carros", misH_iJoS: [
      .init(name: "Toyota", misH_iJoS: [
        .init(name: "Modelo 1"),
        .init(name: "Modelo 2"),
        .init(name: "Modelo 3"),
      ]),
      .init(name: "Nissan"),
      .init(name: "Mazda", misH_iJoS: [
        .init(name: "Modelo 1"),
        .init(name: "Modelo 2"),
      ])
    ]),
    .init(name: "Libros"),
    .init(name: "Profesiones", misH_iJoS: [
      .init(name: "Cocinero"),
      .init(name: "Secretario"),
      .init(name: "Estudiante")
    ])
  ]

  var body: some View {
    NavigationStack {
      List {
        OutlineGroup(items, children: \.misH_iJoS) {
          Text($0.name)
        }
      }
    }
  }
}