Estilo de lista en la interfaz de usuario de Swift

May 08 2023
Para iOS, el estilo de lista predeterminado (.automatic) es .

Para iOS , el estilo de lista predeterminado ( .automatic) es .insetGrouped.

El .automaticestilo de la lista significa que dejamos la opción de estilo en SwiftUI hand . SwiftUI elegirá el que se adecue al contexto.

Esto puede variar según las plataformas, por ejemplo, iPhone, iPad, Mac o incluso el lugar donde se utiliza la vista de lista.

Estilos de lista de iOS

SwiftUI admite muchos estilos que varían según las plataformas.

En este artículo, solo nos centraremos en iOS. Tenemos seis opciones .

  1. .automático
  2. .insetAgrupado
  3. .agrupados
  4. .recuadro
  5. .plano
  6. .barra lateral

SwiftUI admite muchos estilos que varían según las plataformas.

En este artículo, solo nos centraremos en iOS. Tenemos seis opciones .

  1. .automático
  2. .insetAgrupado
  3. .agrupados
  4. .recuadro
  5. .plano
  6. .barra lateral

NavigationStack {
    List {
        Section {
            Text("First")
            Text("Second")
            Text("Third")
        } header: {
            Text("First Section Header")
        } footer: {
            Text("Eos est eos consequatur nemo autem in qui rerum cumque consequatur natus corrupti quaerat et libero tempora.")
        }
        
        Section {
            Text("One")
            Text("Two")
            Text("Three")
        } header: {
            Text("Second Section Header")
        } footer: {
            Text("Tempora distinctio excepturi quasi distinctio est voluptates voluptate et dolor iste nisi voluptatem labore ipsum blanditiis sed sit suscipit est.")
        }
        
        Section {
            Text("1")
            Text("2")
            Text("3")
        } header: {
            Text("Third Section Header")
        } footer: {
            Text("Ea consequatur velit sequi voluptatibus officia maiores ducimus consequatur rerum enim omnis totam et voluptates eius consectetur rerum dolorem quis omnis ut ut.")
        }
    }
    .navigationTitle("List Style")
    // This is the only difference.
    .listStyle(.insetGrouped)
}

Como se mencionó anteriormente, SwiftUI utilizará el estilo de inserción agrupada cuando se configure automáticamente ( .automatic) o DefaultListStyleen iOS.

List {
    // ...
}
// Leave blank or .listStyle(.automatic) yield the same result in iOS.
.listStyle(.automatic)

Ejemplo de recuadro agrupado .insetGroupedo InsetGroupedListStyle.

List {
    // ...
}
.listStyle(.insetGrouped)

      
                

Ejemplo de Agrupado .groupedo GroupedListStyle.

List {
    // ...
}
.listStyle(.grouped)

      
                

Ejemplo de inserción .inseto InsetListStyle.

List {
    // ...
}
.listStyle(.inset)

      
                

Ejemplo de Plain .plaino PlainListStyle.

List {
    // ...
}
.listStyle(.plain)

      
                

El estilo de barra lateral ( .sidebaro SidebarListStyle) viene equipado con una función especial . En macOS e iOS, el estilo de lista de la barra lateral muestra indicadores de divulgación en los encabezados de sección que permiten al usuario contraer y expandir secciones .

List {
    // ...
}
.listStyle(.sidebar)