Como crear un Picker en SwiftUI

Un picker o selector es un componente esencial de la interfaz de usuario que se utiliza para recopilar datos de los usuarios. Con un selector, los usuarios pueden elegir entre un conjunto de valores predefinidos y realizar una selección con facilidad. En este tutorial, exploraremos cómo crear y personalizar selectores para que se adapten al diseño y la funcionalidad de tu aplicación.

Configurando un Picker básico

Para empezar vamos a crear un picker básico que muestra una lista de datos. Nuestro usuario podrá seleccionar que idioma desea aprender. Para manejar esta entrada usaremos un picker. Empezaremos declarando un array llamado languages de la siguiente manera:

private var languages = ["English", "Spanish", "Italian", "French", "Portuguese"]

Para usar un picker también necesitamos declarar la variable de estado para guardar la selección del usuario. Por lo que declararemos la siguiente variable:

@State private var selectedLanguage = 0

Aqui 0 significa el primer item del array languages. El código para mostrar el picker sería el siguiente:

Picker(selection: $selectedLanguage, label: Text("Language To Learn")) {
                        
                        ForEach(0..<languages.count, id: \.self) {
                            
                            Text(self.languages[$0])
                        }
                        
                    }

Que en XCode daría como resultado:

Esta es la manera en la que puedes crear un picker en SwiftUI. Tienes que proporcionar dos valores: el binding de la selección ($selectedLanguage) y la etiqueta de texto describiendo cada opción. Dentro del closure se muestran las opciones disponibles con vistas de texto.

Personalizando la apariencia de un Picker

SwiftUI ofrece bastantes estilos incorporados para cambiar la apariencia y comportamiento de un picker. Los principales estilos son los siguientes:

DefaultPickerStyle: se adapta automáticamente a la plataforma y al entorno.
WheelPickerStyle: muestra un selector con rueda giratoria
SegmentedPickerStyle: presenta las opciones como un control segmentado.
InlinePickerStyle: muestra las opciones en una lista o tabla, en línea con el contenido.
MenuPickerStyle: presenta las opciones en un menú cuando se toca.

Por ejemplo, si usamos el estilo .wheel de la siguiente manera

Picker(

...

)
.pickerStyle(.wheel)

veremos el picker así en XCode: