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

Clase 11 de 23Curso 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:

  1. Crear un archivo SwiftUI: inicia tu proyecto creando un archivo de práctica llamado pickersPractice en SwiftUI.
  2. 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()
}
  1. 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:

  1. Configurar el estado del picker:
  • Declara un estado de tipo entero para la categoría seleccionada: @State var category = 0.
  1. 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:

  1. Definir tipos personalizados:
  • Si tienes un modelo con un enum de tamaños, por ejemplo, small y medium, úsalos como valores del picker.
  1. 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!