Como añadir una ScrollView en vertical y horizontal en SwiftUI

Una vista de desplazamiento es un componente desplazable en SwiftUI. Es una vista contenedora que muestra su contenido en una dirección de desplazamiento horizontal o vertical. No permite hacer zoom hacia adentro o hacia afuera del contenido.

Las vistas de desplazamiento son un componente esencial en SwiftUI que permite a los usuarios ver contenido que es más grande que el área visible de la pantalla.

Para soportar contenido desplazable SwiftUI proporciona una vista llamada ScrollView. Cuando el contenido está dentro de un ScrollView, el contenido se vuelve desplazable. Para lograr esto solo necesitas poner el contenido que quieres hacer desplazable dentro de un ScrollView. Al hacer esto las vistas se vuelven desplazables.

En el siguiente ejemplo podemos ver el uso de ScrollView:

struct ContentView: View {
  

    
    var body: some View {
        ScrollView {
            VStack(spacing: 10) {
                ForEach(0..<20) {
                    Text("Post \($0)")
                        .foregroundStyle(.white)
                        .font(.largeTitle)
                        .frame(width: 150, height: 150)
                        .background(.blue)
                }
            }
        }
        .frame(height: 350)
        .font(.largeTitle)
    }
}

Como añadir una ScrollView horizontal

La vista de desplazamiento es vertical de forma predeterminada, pero también admite contenido con desplazamiento horizontal. En el siguiente ejemplo, puedes ver una ScrollView horizontal:

struct ContentView: View {
  

    
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 10) {
                ForEach(0..<20) {
                    Text("Post \($0)")
                        .foregroundStyle(.white)
                        .font(.largeTitle)
                        .frame(width: 150, height: 150)
                        .background(.blue)
                }
            }
        }
        .frame(height: 350)
        .font(.largeTitle)
    }
}

The first thing we do is pass the .horizontal value to ScrollView.

Since we are using horizontal scrolling we have to change the stack view from VStack to HStack.

After making these changes you will notice that they are now arranged horizontally and now are scrollable.

Escondiendo el indicador de Scroll

Mientras se desplaza por las vistas, es posible que haya notado que hay un indicador de desplazamiento cerca de la parte inferior de la pantalla. Este indicador se muestra de forma predeterminada.

Si desea ocultarlo, todo lo que tiene que hacer es cambiar ScrollView agregando showsIndicators: false como en este ejemplo:

struct ContentView: View {
  

    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 10) {
                ForEach(0..<20) {
                    Text("Post \($0)")
                        .foregroundStyle(.white)
                        .font(.largeTitle)
                        .frame(width: 150, height: 150)
                        .background(.blue)
                }
            }
        }
        .frame(height: 350)
        .font(.largeTitle)
    }
}

Al establecer showsIndicators como falso, iOS ya no mostrará el indicador.