En este artículo vamos a ver como usar Section, Header y List en SwiftUI.
Primero vamos a definir que es cada cosa para que sepamos de que estamos hablando. Vamos a empezar con una Section, que es un contenedor de vista que puedes usar para agregar jerarquía dentro de determinadas vistas. Podemos agrupar datos relacionados en una lista en SwiftUI usando Section.
Una List es un contenedor que presenta filas de datos organizados en una sola columna, brindando opcionalmente la capacidad de seleccionar uno o más miembros.
Opcionalmente, también podemos agregar un encabezado (Header) y un pie de página (Footer) para describir una sección en particular.
Mientras que un Header describe de que se trata una Section y un Footer agrega más detalles si el encabezado por sí solo no es suficiente para transmitir el mensaje completo.
Y aquí hay un ejemplo de General Settings en un iPhone, en el que todo se agrupa.
Y aquí hay otro ejemplo en el que un Header y un Footer son usados para describir una Section
El Header describe sobre que es la Section
El Footer, añade más detalles si el encabezado (Header) por sí solo no es suficiente para transmitir el mensaje completo.
Ahora que sabemos cómo son una sección, un encabezado y un pie de página, es hora de aprender cómo agregarlos a una lista de datos.
Primero, aprendamos cómo agregar secciones a una lista de SwiftUI. Después de eso, aprenderemos cómo agregar un encabezado y pie de página para esas secciones.
Como agrupar una List de SwiftUI en una Section
Añadir una sección es tan fácil como añadir datos en una lista. Sólo necesitas incluir tus datos dentro de una vista de sección.
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("Hello")
Text("My name is")
}
Section {
Text("Ramiro")
Text("Rafart")
Text("SwiftUI")
Text("Developer")
}
Section {
Text("Designer")
Text("Webmaster")
}
Section {
Text("Hello")
Text("this is")
Text("a")
Text("Section")
}
}
.navigationTitle("General")
.navigationBarTitleDisplayMode(.inline)
}
}
}Así es como queda nuestra Section
Como añadir un Header y un Footer a una lista en SwiftUI
Después de agrupar sus datos en una Section, puede agregar un encabezado y un pie de página a una sección en particular especificando un Header y un Footer en la Section de Xcode.
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("iPhone Language")
}
Section {
Text("English")
Text("Spanish")
} header: {
Text("Preferred language order")
} footer: {
Text("Apps and websites will use the first language in this list that they support.")
}
Section {
Text("Region")
Text("Calendar")
Text("Temperature")
}
}
.navigationTitle("Swift Apps")
.navigationBarTitleDisplayMode(.inline)
}
}
}El encabezado (Header) se mostrará encima de la sección y el pie de página (Footer) se mostrará debajo de la sección.
Pero la apariencia puede cambiar según el estilo de la lista.
Así es como se ven el encabezado (Header) y el pie de página (Footer).
Cómo personalizar el encabezado y pie de página de la sección con SwiftUI
El encabezado y pie de página de la sección cambiarán su apariencia según el estilo de lista de forma predeterminada.
Aquí hay el mismo código fuente que en la sección anterior pero ahora con añadimos list style a .inset
struct ContentView: View {
var body: some View {
NavigationView {
List {
Section {
Text("iPhone Language")
}
Section {
Text("English")
Text("Spanish")
} header: {
Text("Preferred language order")
} footer: {
Text("Apps and websites will use the first language in this list that they support.")
}
Section {
Text("Region")
Text("Calendar")
Text("Temperature")
}
}
.listStyle(.inset)
.navigationTitle("Swift Apps")
.navigationBarTitleDisplayMode(.inline)
}
}
}
Otros estilos que podemos usar para header y footer son:
.plain
.inset
.grouped
.insetGrouped
.sidebar
La apariencia del header y el footer puede cambiar acorde al list style