[SUI] Section

Section es un componente que se usa para agregar jerarquías a un List, lo que permite identificar rasgos comunes entre los valores listados.

• init(content:): Agrupa las filas que aparecen en content.
• init(content:header:footer:): Agrupa las filas de content, presenta las vistas de header como encabezado y las de footer como pie de sección.
• init(_:isExpanded:content:): Agrupa las filas de content bajo el texto de encabezado titleKey, y se controla su visibilidad con isExpanded.

En caso de querer cambiar el estilo del encabezado de sección, se puede usar:

• headerProminence(_:): Define cuán prominente es el título de la sección: puede ser standard o increased.

Aunque las filas adquieren su altura de forma automática con base en su contenido, también se puede inyectar una altura mínima por medio del modificador environment(_:_:) sobre List.

• defaultMinListHeaderHeight
• defaultMinListRowHeight

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 {
      Section("Componentes estáticos") {
        Text("Favoritos")

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

            }
            .buttonStyle(.bordered)
          }
        }

      }

      Section(isExpanded: $otherContactsVisible) {
        ForEach(otrosContactos) { contact in
          Text(contact.name)
        }
      } header: {
        HStack {
          Text("Componentes dinámicos")

          Spacer()

          Button {
            withAnimation {
              otherContactsVisible.toggle()
            }
          } label: {
            Image(systemName: "chevron.right")
              .rotationEffect(
                !otherContactsVisible ? Angle(degrees: 0) : Angle(degrees: 90)
              )
          }
          .frame(width: 20, height: 20)
        }
      }
      .headerProminence(.increased)
    }
    .environment(\.defaultMinListRowHeight, 100)
    .toolbar {
      ToolbarItem(placement: .bottomBar) {
        Button {
          otherContactsVisible.toggle()
        } label: {
          Text((otherContactsVisible ? "Ocultar" : "Mostrar") + " componentes dinámicos")
        }
      }
    }
  }
}