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)
}
}
}
}
}
}
SOCIAL SHARE CARD GENERATOR