Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:31

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 6 de 23

Clase 6 / 23

Recursos

Iniciar con el uso de ScrollView combinado con VStack y HStack en SwiftUI es una estrategia poderosa para crear listas y carruseles interactivos en tus aplicaciones. Con esta técnica, el desarrollo se agiliza al facilitar la reutilización de código y la implementación de desplazamientos verticales y horizontales. Aquí tienes una guía rápida para aprovechar al máximo estas herramientas.

¿Cómo crear una función para reutilizar vistas?

Primero, en lugar de replicar varias líneas de código para crear cards, puedes simplificar el proceso con las funciones y los view builders. Estos permiten definir componentes reutilizables de forma sencilla. Así se logra:

Definir la función fuera del body:

func cardSmallView() -> some View { // Código del card }
Utilizar el decorador ViewBuilder: agrega @ViewBuilder antes de la definición de la función para indicar que se tratará de una vista:

@ViewBuilder func cardSmallView() -> some View { // Código del card }
Invocar la función dentro del VStack: esto mejora la legibilidad y mantenimiento del código:

VStack { cardSmallView() cardSmallView() cardSmallView() }

¿Cómo transformar un VStack en una lista desplazable?

Para convertir un VStack en una lista desplazable, encapsúlalo dentro de un ScrollView:

Uso de ScrollView:

ScrollView { VStack { cardSmallView() cardSmallView() cardSmallView() } }

Esto permite que los elementos se desplacen verticalmente, evitando el desbordamiento.

¿Cómo crear un carrusel horizontal?

Cambiar el eje de desplazamiento es simple, modifica tu VStack a HStack y define el eje en ScrollView:

Modificar a HStack:

ScrollView(.horizontal) { HStack { cardSmallView() cardSmallView() cardSmallView() } }

Esta configuración crea un carrusel desplazable en el eje horizontal.

¿Cómo reducir código usando ForEach?

Cuando tienes múltiples cards, en lugar de repetir líneas, utiliza ForEach para iterar:

Implementar ForEach:

ScrollView { VStack { ForEach(0..<63) { _ in cardSmallView() } } }

Este método genera automáticamente el número especificado de vistas con menos líneas de código.

¿Cómo combinar diferentes tipos de card en un ScrollView?

Incorporando diferentes cards, puedes añadir dinamismo a la interfaz. Aquí un ejemplo de cómo ajustar el código:

Definir funciones para distintos tipos de card:

@ViewBuilder func cardMediumView() -> some View { // Código del card mediano }
Combinar en ForEach:

ScrollView { VStack { ForEach(0..<10) { index in if index % 3 == 0 { cardMediumView() } else { cardSmallView() } } } }

Incorporar estas técnicas en SwiftUI te permitirá desarrollar interfaces más ricas e intuitivas. ¡La clave es practicar y experimentar con estas configuraciones para ofrecer la mejor experiencia al usuario final!

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

Uso de Pickers en SwiftUI para Selección de Fechas y Opciones

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos