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).
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:
//
// TogglePractice.swift
// Notes
//
// Created by Paul Flores on 25/02/25.
//
import SwiftUI
struct TogglePractice: View {
@State private var age: Double = 0
@State private var isAdult: Bool = false
var body: some View {
VStack {
Text("Age: \(age.formatted(.number))")
Slider(value: $age, in: 1...80, step: 1)
Toggle("Is an adult?", isOn: $isAdult)
}
.padding()
.onChange(of: age) { newValue in
isAdult = newValue >= 18
}
.onChange(of: isAdult) { newValue in
age = newValue ? 18 : 15
}
}
}
#Preview {
TogglePractice()
}
Buenas!
Comparto el codigo de la solución al challenge :)struct TogglePractice: View {
struct TogglePractice:View{ @Statevarage:Double=0 @StatevarisAdult:Bool=falsevarbody: some View{VStack{Toggle("Is adult?",isOn: $isAdult)Slider(value: $age,in:0...18,step:1).onChange(of: isAdult){ newValue inif 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()
}
}
}
Buenas! Comparto mi solución al challenge
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()
}
}
struct TogglePracticeView: View {
@State var age: Double = 18
@State var isAdult: Bool = false
var body: some View {
VStack {
Text ("Age: \(age.formatted(.number))")
Slider(value: $age, in: 0...100,step: 1)
.padding(.horizontal, 20)
Toggle("Es adult ?", isOn: $isAdult)
.padding(.horizontal, 20)
.padding(.vertical, 20)
}.onChange(of:age) { oldValue, newValue in
if newValue >= 18 {
isAdult = true
}else {
isAdult = false
}
}.onChange(of:isAdult) { oldValue, newValue in
if isAdult {
age = 20
}else {
age = 10
}
}
}
}
VStack{
Text("Edad: \(edad.formatted(.number))")
Slider(value: $edad, in: 0...100, step: 1)
Toggle("EsAdulto?", isOn: $esAdulto)
}
.padding()
.onChange(of: esAdulto) { newValueBool in
if newValueBool{
//Setear 18
edad = 18
}else{
//Setear 15
edad = 15
}
}
En swift también existe las condiciones ternarias que retorna un valor dependiendo del resultado de la condición, y esta ternarias como su nombre lo indica esta compuesto por 3 elementos principales que son: validación, el valor que devolveremos cuando sea true y el valor que devolveremos cuando sea false
variable = validación
? valor cuando es true
: valor cuando es false
En resumen, así quedaría el onChange resolviendo el reto del profesor:
.onChange(of: isAdunt){ _, newValue in age = newValue ?18:17}
Podemos simplificar tanto if/else con ternary operators
Un casting también funciona:
Text("Age: \(Int(age))")
Hola, comparto el codigo de mi solucion de reto:
struct TogglePractice:View{ @Statevarage2:Double=18 @StatevarisAdult2:Bool=falsevarbody: some View{VStack{Text("Eres mayor de edad?")Toggle("Is adult?",isOn: $isAdult2)Text("Age: \(age2.formatted(.number))")Slider(value: $age2,in:1...100,step:1)}.padding().onChange(of: isAdult2){ newValue inif newValue ==true{ age2 =18}else{ age2 =15}}}}```**struct**TogglePractice:View{@State**var** age2:Double=18@State**var** isAdult2:Bool=**false****var** body:**some**View{VStack{Text("Eres mayor de edad?")Toggle("Is adult?",isOn: $isAdult2)Text("Age: \\(age2.formatted(.number))")Slider(value: $age2,in:1...100,step:1)}.padding().onChange(of: isAdult2){ newValue **in****if** newValue ==**true**{age2 =18}**else**{age2 =15}}}}
