Faites réagir l'interface
Donnez une place à une valeur, modifiez-la avec un bouton et regardez uniquement ses lecteurs se rafraîchir.
Résultat : chaque clic actualise un compteur à l'écran à partir d'une petite valeur d'état partagée.
01
Découvrez State en trois étapes sympathiques
State<T> est un petit objet clonable qui pointe vers une valeur sur le thread d'interface. Tous ses clones retrouvent la même valeur, le bouton et le texte peuvent donc coopérer.
Créez une seule source
State::new(0_u32) conserve le compteur actuel. Gardez ce petit objet partagé près de la configuration de l'application.
Partagez la même valeur
Cloner State ne duplique pas le compteur. Vous obtenez un autre petit objet qui pointe vers la même valeur réactive.
Laissez les widgets l'observer
Un widget Text lit le memo dérivé pendant le travail retenu. Seules les lectures effectuées dans un callback retenu actif deviennent des abonnements. Les lectures ordinaires effectuées ailleurs restent passives.
02
Construisez le plus petit compteur utile
Ce compteur reste assez petit pour être lu en deux passages : créez d'abord la valeur partagée, puis reliez le texte visible et le bouton.
Construisez par petites étapes
Chaque bloc de code change une seule idée de l'application de référence vérifiée.
Étape 1 : créer puis dériver
State::new conserve le nombre. to_text_with crée une valeur de texte réactive à partir de lui.
let count = State::new(0_u32);
let count_label = count.to_text_with(|value| format!("{value} tiny wins"));
let count_for_view = count.clone();
Étape 2 : lire et modifier depuis la vue
Text observe la valeur dérivée. Le bouton appelle update et planifie le prochain rafraîchissement visible.
Card::elevated().width(420.0).child(
Column::new()
.gap(16.0)
.child(Text::new("Make one value move").size(26.0))
.child(Text::new(count_label.clone()).size(20.0))
.child(
Button::<()>::with_label("Add one").on_click_ctx(move |_ctx| {
count_for_click.update(|value| *value += 1);
}),
),
)
}),
)Compilé avec Rust 1.88 sur beta.2. State::update, State::to_text_with, Text::new et Button::on_click_ctx sont des API publiques.
03
Lisez l'exemple comme une petite histoire
Il ne contient que trois éléments mobiles. Suivez-les une fois et le motif réactif devient agréablement répétitif.
1. Conservez
Créez count une seule fois avant App::new afin que sa valeur survive à chaque reconstruction du contenu.
2. Décrivez
to_text_with transforme le nombre en memo String paresseux que Text peut lire directement.
3. Modifiez
Le gestionnaire de clic appelle update. Tous les clones partagent le nouveau nombre, puis le runtime planifie l'actualisation nécessaire pour les lecteurs concernés.
Trois petits détails à retenir
Clonez l'objet State pour le partager entre plusieurs fonctions. State::read clone la valeur stockée. En beta.2, set et update avertissent aussi les lecteurs lorsque la nouvelle valeur est identique à l'ancienne.
À vous de jouer
Exercice : rendez le compteur plus malin
Enrichissez le compteur avec une modification sûre et un second texte dérivé.
- 1Ajoutez un bouton qui retire un avec saturating_sub pour ne jamais descendre sous zéro.
- 2Créez un second texte dérivé qui affiche Pair ou Impair.
Utilisez update pour la soustraction et to_text_with pour le texte dérivé.
Les deux textes se rafraîchissent après chaque clic et les soustractions répétées s'arrêtent à zéro.