No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Picker y DatePicker

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:

  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!

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

![](https://static.platzi.com/media/user_upload/image-c086e919-e416-4868-8152-02d14cc189d7.jpg)
Para añadir una pequeña imagen, cambié el Text() por una Label, de la siguente manera:Picker("Tamaños", selection: $size) { ```js Picker("Tamaños", selection: $size) { Label("Pequeño", systemImage: "square.and.arrow.up").tag(NCardType.small) Label("Mediano", systemImage: "airtag").tag(NCardType.medium) } ```![](https://static.platzi.com/media/user_upload/image-4f9f7c86-8c85-430a-a274-e4dce346f133.jpg) Label("Pequeño", systemImage: "square.and.arrow.up").tag(NCardType.small) Label("Mediano", systemImage: "airtag").tag(NCardType.medium) }