Uso de Pickers en SwiftUI para Selección de Fechas y Opciones
Clase 11 de 23 • Curso de Desarrollo de Aplicaciones con SwiftUI
Resumen
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 estadodate
.
@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
ymedium
, ú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 delenum
.
@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!