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!
