[SUI] ForEach

ForEach genera una vista por cada uno de los valores identificables de una colección.

• init(_:id:content:): Dada una colección data, con el keypath de un identificador id, genera una vista con content por cada elemento de la colección.
• init(_:content:): Dada una colección data cuyos elementos conforman el protocolo Identifiable, genera una vista con content por cada elemento.

Definición manual del identificador

El sistema necesita identificar las vistas para eliminarlas o agregar nuevas cuando la colección se actualiza.

Los valores que conforman Hashable pueden ser usados como identificadores:

struct ContentView: View {
  var body: some View {
    VStack {
      Divider()
      ForEach(1...3, id: \.self) { number in
        VStack {
          Text("Número: \(number)")
          Divider()
        }
      }
    }
  }
}

En el ejemplo anterior se usó Divider para separar a los componentes.

Definición automática del identificador

En caso de tener modelo complejos como datos a pintar en la lista, es mejor proveer un identificador único usando el protocolo Identifiable, que requiere que se defina una propiedad id.

struct SomeData: Identifiable {
  var id: Int
  var text: String
}

struct ContentView: View {
  var data: [SomeData] = [
    .init(id: 1, text: "Uno"),
    .init(id: 2, text: "Dos"),
    .init(id: 3, text: "Tres"),
  ]
  var body: some View {
    VStack {
      Divider()
      ForEach(data) { number in
        VStack {
          Text("Número: \(number.text)")
          Divider()
        }
      }
    }
  }
}