Implementación de Sliders y Toggles en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Contenido del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:39

Implementación de Sliders y Toggles en SwiftUI

Curso de Desarrollo de Aplicaciones con SwiftUI

Clase 12 de 23

Clase 12 / 23

Recursos

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:

Utilizar el modificador step, estableciendo incrementos fijos:

Slider(value: $age, in: 1...100, step: 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.

Laura Belen Yachelini

Hace 2 años

Buenas!

Comparto el codigo de la solución al challenge :)struct TogglePractice: View {

struct TogglePractice: View {
  @State var age: Double = 0
  @State var isAdult: Bool = false
    var body: some View {
       
        VStack{
          Toggle("Is adult?", isOn: $isAdult)
          Slider(value: $age, in:0...18, step: 1)
            .onChange(of: isAdult) { newValue in
              if newValue {
                age = 18
              }else{
                age = 17
              }
            }
        }.padding()
        }
}

@State var age: Double = 0

@State var isAdult: Bool = false

var body: some View {

VStack {

// Text("Age: \(age.formatted(.number))")

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

// Toggle("Is adult?", isOn: $isAdult)

// }.padding()

// .onChange(of: age) { newValue in

// if newValue >= 18 {

// isAdult = true

// }else{

// isAdult = false

// }

VStack{

Toggle("Is adult?", isOn: $isAdult)

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

.onChange(of: isAdult) { newValue in

if newValue {

age = 18

}else{

age = 17

}

}.padding()

}

Fundamentos de SwiftUI y desarrollo de Interfaces

Creación de Apps Modernas con SwiftUI

Crea tu primera app de notas en SwiftUI

Uso de Modifiers en SwiftUI para Personalizar Vistas

Dibujo y Personalización de Íconos e Imágenes en Xcode

Creación de Layouts Complejos con Stacks en SwiftUI

Scroll View y Stacks: Creación de Listas y Carruseles en SwiftUI

Listas nativas en SwiftUI con datos reales

Buenas prácticas en SwiftUI: Creación y organización de vistas y modelos

Interacción del Usuario y Componentes de Entrada

Creación y Funcionalidad de Botones en SwiftUI

TextField y TextEditor en SwiftUI

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

Implementación de Sliders y Toggles en SwiftUI

Formulario de notas con SwiftUI

Alerts y Sheets para mostrar formularios

Gestos en SwiftUI: tap, drag y long press

Animaciones y Transiciones en SwiftUI con ProgressView

Manejo del Estado y Arquitectura con ViewModels

Cómo crear tu primer ViewModel en SwiftUI

Conexión de datos en apps con Environment Object en SwiftUI

Creación de Componentes Reutilizables con @Binding en SwiftUI

Navegación Avanzada

Navegación SwiftUI de lista a detalle

Personalización de Tool Bar y Navegación con TabViews en SwiftUI

Lanzamiento de la app

Añadir botón de favoritos y configurar icono de aplicación

Lanzamiento de tu Primera App con SwiftUI en el Simulador

Implementación de Sliders y Toggles en SwiftUI

Progreso del curso

Fundamentos de SwiftUI y desarrollo de Interfaces

Interacción del Usuario y Componentes de Entrada

Manejo del Estado y Arquitectura con ViewModels

Navegación Avanzada

Lanzamiento de la app

Recursos

Recursos