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

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:008:56

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

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 11 de 23

Clase 11 / 23

Recursos

Los pickers son componentes esenciales al desarrollar aplicaciones que requieren seleccionar opciones, como fechas o categorías.

¿Cómo funciona un DatePicker?

El DatePicker es fundamental para seleccionar fechas y horas. Para implementarlo, sigue estos pasos:

Crear un archivo SwiftUI: inicia tu proyecto creando un archivo de práctica llamado pickersPractice en SwiftUI.
Agregar un DatePicker:

Declara un estado para almacenar la fecha actual con @State var date = Date().
Inserta el DatePicker con un título y referencia al estado date.

@State private var date = Date()

var body: some View { DatePicker("Date", selection: $date) .padding() }

Modificar el DatePicker:

Utiliza el atributo displayComponent para restringir la selección solo a fechas o solo a horas.
Cambia su estilo con datePickerStyle, eligiendo entre opciones como rueda o gráfica.

¿Cómo implementar un picker de categorías?

Para crear un picker que muestre opciones como categorías o números, sigue estos pasos:

Configurar el estado del picker:

Declara un estado de tipo entero para la categoría seleccionada: @State var category = 0.

Añadir opciones al picker:

Usa la sintaxis de SwiftUI para enumerar las opciones dentro de llaves y personalízalas con tag para identificar qué valor está seleccionado.

@State private var category = 0

var body: some View { Picker("Categorías", selection: $category) { Text("Categoría Uno").tag(0) Text("Categoría Dos").tag(1) } .pickerStyle(SegmentedPickerStyle()) }

¿Cómo seleccionar entre datos personalizados?

Para seleccionar datos más complejos, como tamaños predefinidos en un modelo, sigue estos pasos:

Definir tipos personalizados:

Si tienes un modelo con un enum de tamaños, por ejemplo, small y medium, úsalos como valores del picker.

Implementar picker con datos personalizados:

Usa un estado para controlar el tamaño seleccionado.
Añade opciones con tag que correspondan al caso del enum.

@State private var size = CardType.small

enum CardType { case small, medium }

var body: some View { Picker("Tamaños", selection: $size) { Text("Pequeño").tag(CardType.small) Text("Mediano").tag(CardType.medium) } }

¿Qué recomendación seguir para mejorar pickers?

Estilo: adapta el estilo del picker conforme al diseño de tu app para una mejor experiencia de usuario.
Pruebas y errores: no te preocupes si ves errores en el preview; simplemente recarga la vista.
Innovación: experimenta incorporando imágenes junto a textos para hacer el picker más dinámico.

Recuerda, la práctica te llevará a perfeccionar el uso de SwiftUI y hacer tus aplicaciones más intuitivas. ¡Sigue explorando y desafiándote a ti mismo para mejorar tus habilidades en desarrollo de apps!

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

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

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