[SUI] Combinando List con ForEach

Un List puede pintar un conjunto de vistas (forma estática), uno o más ForEach (forma dinámica) o combinando las dos aproximaciones.

A continuación se detalla más sobre cómo combinar List y ForEach para:

1. Crear listas con secciones

En el siguiente ejemplo tenemos dos arreglos anidados. Se crea una lista a partir del arreglo contactGroups, donde cada elemento será una sección (i.e. Section) y dentro de ella, se crea una lista con ForEach para recorrer los elementos de contacts.

struct ContactGroup: Identifiable {
    let id = UUID()
    let name: String
    let contacts: [Contact]
}

struct Contact: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    let contactGroups: [ContactGroup] = [
        ContactGroup(
            name: "Favoritos",
            contacts: [
                Contact(name: "Luis"),
                Contact(name: "David"),
            ]),
        ContactGroup(
            name: "Otros",
            contacts: [
                Contact(name: "Goyes"),
                Contact(name: "Garcés")
            ]),
    ]

    var body: some View {
        List(contactGroups) { group in
            Section {
                ForEach(group.contacts) {
                    Text($0.name)
                }
            } header: {
                Text(group.name)
            }
        }
    }
}

2. Crear una lista con componentes estáticos y dinámicos

En el siguiente ejemplo se pintan algunos componentes de forma estática (i.e. el primer Text, seguido de un HStack y un Toggle) y después se crea una sección para agregar una parte dinámica que usa un ForEach.

struct ContentView: View {
  let favoritos = [
    Contact(name: "Luis"),
    Contact(name: "David"),
  ]

  let otrosContactos = [
    Contact(name: "Goyes"),
    Contact(name: "Garces")
  ]

  @State var otherContactsVisible = true

  var body: some View {
    List {
      Text("Favoritos")

      HStack {
        ForEach(favoritos) { contact in
          Button(contact.name) {

          }
          .buttonStyle(.bordered)
        }
      }

      Toggle("Mostrar otros contactos", isOn: $otherContactsVisible)

      if otherContactsVisible {
        Section {
          ForEach(otrosContactos) { contact in
            Text(contact.name)
          }
        }
      }
    }
  }
}