Implementación de Sliders y Toggles en SwiftUI

Aprender a utilizar elementos interactivos en SwiftUI como sliders y toggles te permite obtener información del usuario de forma dinámica y eficiente. En esta guía, vas a entender cómo incorporar un slider para datos en un rango específico y un toggle para respuestas tipo boolean (verdadero o falso), facilitando así una experiencia más intuitiva en tus aplicaciones.

¿Qué es un slider en SwiftUI y cómo se implementa?

Un slider en SwiftUI es una herramienta que permite elegir rápidamente un valor dentro de un rango específico. En Xcode, al implementar un slider, recuerda:

• Crear un state usando la propiedad @State.
• Elegir un valor inicial, por ejemplo, una edad de 18 con tipo Double.
• Especificar el rango mínimo y máximo claramente (por ejemplo, de 1 a 100).

Tu código inicial podría verse así:

@State private var age: Double = 18

Slider(value: $age, in: 1...100)

¿Por qué usar tipo de dato Double para edades?

Aunque una edad podría considerarse número entero, el slider requiere usar Double debido a la continuidad en los valores seleccionados. Para solucionar esto y obtener números enteros hay dos estrategias:

1. Utilizar el modificador step, estableciendo incrementos fijos:

Slider(value: $age, in: 1...100, step: 1)

1. Formatear el valor visualmente para eliminar decimales:

Text("\(age.formatted(.number))")

¿Cómo implementar y conectar un toggle en SwiftUI?

El toggle ofrece interacción mediante valores booleanos, activado o desactivado. Los pasos básicos para agregar un toggle son:

• Crear un state booleano, por ejemplo @State private var isAdult: Bool = false
• Usar Toggle con etiqueta y vincularlo con el state:

Toggle("Mayor de edad", isOn: $isAdult)

¿Cómo relacionar el slider con el toggle usando lógica condicional?

Puedes utilizar un evento llamado onChange para monitorear cambios en el slider y activar el toggle según sea el caso:

Slider(value: $age, in: 1...100, step: 1)
    .onChange(of: age) { newAge in
        if newAge >= 18 {
            isAdult = true
        } else {
            isAdult = false
        }
    }

De este modo, cuando muevas el slider y llegues o superes el valor 18, el toggle cambiará automáticamente su estado.

¿Cómo afrontar el reto inverso?

Ahora, como práctica avanzada, intenta lo contrario:

• Que el slider se adapte cuando cambies el toggle.
• Al activar el toggle "mayor de edad", el slider debería ajustarse automáticamente a 18.
• Al desactivarlo, debería ajustarse a un número menor, como 17.

Cuando completes este reto, comparte tu solución y consulta cualquier duda en los comentarios.