[SUI] List

List es un contenedor que presenta filas de datos apiladas en una sola columna, opcionalmente proveyendo la habilidad de seleccionar uno o más miembros.

Los items de una lista están automáticamente separados por una línea. Además, List incluye la funcionalidad de seleccionar, añadir o eliminar contenido.

• init(_:rowContent:): data es la colección de valores para crear las filas, cuyos elementos deben ser Identifiable. rowContent es un closure que define las vistas usadas para crear las filas.
• init(_:id:rowContent:): id es el KeyPath al identificador de cada valor dentro de data.
• init(_:selection:rowContent:): selection es un Binding que almacena uno o el conjunto de identificadores de las filas seleccionadas.

struct ContentView: View {
  var body: some View {
    List {
      Text("A List Item")
      Text("A Second List Item")
      Text("A Third List Item")
    }
  }
}

En dispositivos móviles, la lista tiene un relleno alrededor de las vistas y tiene un color de fondo. Para cambiarlo se puede usar lo siguiente:

• listStyle(_:): Asigna un estilo de tipo ListStyle al List, que puede tener los valores predefinidos:
• automatic
• insetGrouped (por defecto): Pone fondo, agrupa y pone relleno a los lados
• grouped: Pone fondo, agrupa, pero no pone relleno a los lados.
• inset: NO pone fondo, no pone relleno a los lados.
• plain: NO pone fondo, no agrupa, no pone relleno a los lados. Se consigue un resultado parecido que usando ForEach y Divider, solo que ahora hay un pequeño margen en los items.
• sidebar: Pone fondo, agrupa y pone relleno a los lados.

Se puede cambiar algunos aspectos específicos del List con los siguientes modificadores:

• listRowBackground(_:): Define un fondo para una fila.
• listRowInsets(_:): Define el margen de una fila.
• listRowSeparator(_:edges:): visibility determina si el separador es visible. edged determina qué separadores son afectados (all, bottom o top).
• listRowSeparatorTint(_:edges:): Define el color de la barra de separación.

struct ContentView: View {
  var data = [
    "A List Item",
    // ...
    "A Ninth List Item",
  ]
  var body: some View {
    List(data.enumerated(), id: \.element) { item in
        HStack {
          Image(systemName: "circle")
          Text(item.element)
        }
        .listRowBackground(item.offset.isMultiple(of: 4) ? Color.gray : Color.clear)
        .listRowInsets(.leading, item.offset.isMultiple(of: 2) ? 50 : 20)
        .listRowSeparator((item.offset + 1).isMultiple(of: 3) ? .hidden : .visible, edges: .all)
        .listRowSeparatorTint((item.offset + 2).isMultiple(of: 3) ? .red : .gray, edges: .all)
    }
    .listStyle(.plain)
  }
}