$Binding et Slider
$Binding et Slider
Two-way Binding $
Le Two-Way Binding en SwiftUI permet de lier une variable d’état (@State) à une vue interactive, comme un TextField, un Toggle ou un Slider. Ça signifie que lorsque l’utilisateur modifie la valeur dans l’interface, la variable est mise à jour automatiquement, et inversement, si la variable est modifiée dans le code, l’interface se met à jour en temps réel. Par exemple, en liant un Slider à une variable @State via le symbole $, la mise à jour de l’un entraîne instantanément la mise à jour de l’autre Ce mécanisme rend SwiftUI extrêmement efficace, car il assure une synchronisation automatique entre la donnée et l’affichage, sans nécessiter de rechargement manuel de la vue. En résumé, dès qu’un élément d’interface doit envoyer et recevoir une valeur, utilise un Binding ($) avec @State pour simplifier ton code et éviter les erreurs de synchronisation.Le composant Slider
Le composant Slider est utilisé pour ajuster une valeur en la faisant glisser sur un intervalle continu. Conçu pour fonctionner avec des valeurs de type Double, ce composant permet aux utilisateurs d’incrémenter ou de décrémenter une valeur spécifique dans une plage définie.
struct SliderView: View {
@State private var speed: Double = 50
var body: some View {
VStack {
Slider(value: $speed, in: 0...100)
HStack{
Image(systemName: "car")
Text("Vitesse : \(Int(speed)) Km/h")
}
}
}
}
Contrôler les étapes du range
En utilisant le paramètre step sur ton Slider, tu pourras contrôler les étapes de la plage de valeurs. Ça signifie que tu peux faire avancer le curseur par paliers, par exemple de 5 en 5 ou de 10 en 10.
struct SliderView: View {
@State private var sound: Double = 0
var body: some View {
VStack {
Slider(value: $sound, in: 0...100, step: 10)
.padding()
HStack {
Image(systemName: "speaker.wave.2.fill")
Text("Volume : \(Int(sound))")
}
}
}
}
Changer la couleur
Pour changer la couleur d’un Slider en SwiftUI, il suffit d’appliquer le modificateur .tint().
struct SliderView: View {
@State private var sound: Double = 0
var body: some View {
VStack {
Slider(value: $sound, in: 0...100, step: 10)
.tint(.orange)
.padding()
HStack {
Image(systemName: "speaker.wave.2.fill")
Text("Volume : \(Int(sound))")
}
}
}
}
Labeliser un slider min/max
On peux placer un label min et max dans les paramètres du Slider.
struct SliderView: View {
@State private var volume: Double = 50
var body: some View {
VStack {
Slider(value : $volume, in : 0...100, step : 5, minimumValueLabel : Image(systemName : "speaker.fill"), maximumValueLabel : Image(systemName : "speaker.wave.3.fill"), label : {})
.tint(.orange)
.padding()
Text("Volume: \(Int(volume))")
}
}
}
Tips
Petit rappel à retenir sur ce cours, le Slider en SwiftUI ne prend en charge que le type Double. Si tu essaies d’utiliser un Int, cela ne fonctionnera pas. Par défaut, l’affichage d’un Double peut être peu lisible, par exemple 50.0000. Si tu veux afficher uniquement un nombre entier, tu peux convertir la valeur en Int avec Int(valeurEnDouble), ce qui donnerait Int(50.75), arrondi à 50. Si tu souhaites conserver des décimales mais limiter leur affichage à deux chiffres après la virgule, tu peux utiliser le formatage de chaîne avec String(format: « %.2f », valeurEnDouble), ce qui transformerait 50.756 en 50.76.
Tips
Petit rappel à retenir sur ce cours, le Slider en SwiftUI ne prend en charge que le type Double. Si tu essaies d’utiliser un Int, cela ne fonctionnera pas. Par défaut, l’affichage d’un Double peut être peu lisible, par exemple 50.0000. Si tu veux afficher uniquement un nombre entier, tu peux convertir la valeur en Int avec Int(valeurEnDouble), ce qui donnerait Int(50.75), arrondi à 50. Si tu souhaites conserver des décimales mais limiter leur affichage à deux chiffres après la virgule, tu peux utiliser le formatage de chaîne avec String(format: « %.2f », valeurEnDouble), ce qui transformerait 50.756 en 50.76.