Cuando el contenido de la vista supera el tamaño de la pantalla, es necesario hacerlo desplazable ("scrollable"), para lo cual se envuelve la vista en un ScrollView.
ScrollView solo hace que el contenido se pueda desplazar en la pantalla. Para agrupar vistas igual es necesario usar un Stack vertical u horizontal. No obstante, esto no necesariamente significa que hay que usar un VStack o un HStack, sino que se puede optar por sus versiones perezosas: LazyVStack y LazyHStack, respectivamente.
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack(pinnedViews: .sectionHeaders) {
Section {
ForEach(1..<100) { number in
Text("Número: \(number)")
}
} header: {
Text("Primera seccion")
.background(.red)
}
Section {
ForEach(100..<200) { number in
Text("Número: \(number)")
}
} header: {
Text("Segunda seccion")
.background(.yellow)
}
}
}
// ⚠️ Para ocultar el indicador de desplazamiento se usa este modificador
.scrollIndicators(.hidden)
}
}
Si no se pasa ningún argumento pinnedViews al LazyVStack, entonces no va a anclar los encabezados de las secciones:
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack {
// ...
}
}
}
}
Modificadores
scrollIndicators(_:axes:): Define una visibilidad,ScrollIndicatorVisibility(que puede serautomatic,never,hidden,visible), para uno o varios ejes.
scrollDisabled(_:): Habilita o deshabilita el scroll.
scrollDismissesKeyboard(_:): Determina el comportamiento del teclado cuando el gesto de arrastre comienza. El argumento de tipoScrollDismissesKeyboardModepuede serautomatica,immediately,interactivelyynever(por defecto).
scrollBounceBehavior(_:axes:): Determina si elScrollViewrebota cuando el usuario llega al inicio o final. El primer argumento de tipoScrollBounceBehaviorpuede serautomatic,alwaysobasedOnSize(solo si el contenido excede el tamaño de la vista)
scrollContentBackground(_:): Muestra u oculta el fondo del scrollview. Las listas y tablas agregan automáticamente