Como crear un Toggle (Interruptor) Switch y Button

En este tutorial veremos como crear un toggle (interruptor) switch y un botón toggle en SwiftUI. Un toggle solo tiene dos estados: ON y OFF (verdadero y falso). Este control es util para hacer seleccionar a los usuarios entre dos opciones.

Similarmente a como crear un Picker control, necesitamos declarar una variable de estado para guardar la configuración actual del toggle.

Vamos a empezar declarando la variable de estado:

@State private var showPhones = false

Para crear un toggle usamos el siguiente código:

Toggle(isOn: $showPhones) {

	Text("Show Phones Only")
}

Usas la vista Toggle para crear un toggle switch y pasar el estado actual del toggle. En el closure presentas la descripción del toggle. Aquí simplemente usamos una vista de texto.

El canvas de XCode ahora tendría que presentar un toggle switch. La variable showPhones siempre mantendrá un registro de la selección del usuario.

El resultado en XCode sería el siguiente:

Otra manera de inicializar un toggle es de la siguiente manera con un SF Symbol, por ejemplo:

Toggle("Wi-Fi", systemImage: "wifi", isOn: $showPhones)

Que en XCode da como resultado:

Usamos un SF Symbol para crear el toggle.

Personalizanco el Color del Toggle Switch

En SwiftUI podemos personalizar el color del toggle con el modifier .tint de la siguiente manera:

Toggle("Wi-Fi", systemImage: "wifi", isOn: $showPhones)
.tint(.blue)

En XCode el resultado sería el siguiente:

Como crear un Toggle Button en SwiftUI

Un botón toggle es un componente en muchas UI, permitiendo a los usuarios cambiar entre dos estados representando ON/OFF o verdadero/falso. SwiftUI, con su sintaxis declarativa, hace que crear estos elementos interactivos sea increiblemente sencillo.

Necesitaremos una variable de estado para guardar el valor verdadero o falso. Para crear y personalizar un botón toggle considera el siguiente código:

@State private var showPhones = false
Toggle("Wi-Fi", systemImage: showPhones ? "wifi" : "wifi.slash", isOn: $showPhones)
                            .font(.largeTitle)
                            .tint(.blue)
                            .toggleStyle(.button)
                            .labelStyle(.iconOnly)

Que daría como resultado en XCode: