Boutons et champs
Ajoutez des contrôles sympathiques, des cartes, des badges, des icônes et un vrai champ de texte à la même petite application.
Résultat : une carte de tâche compacte avec un titre modifiable, un badge d'état, une vraie icône et un bouton prêt pour le chapitre sur les actions.
01
Construisez une carte utile
Nous allons conserver une seule surface ciblée et ajouter uniquement les contrôles qui rendent son rôle évident.
Card::elevated()TextInput::new().bind(state)Button::with_label(...)Badge::dot(...)Icon::new(IconId::Plus)02
Six contrôles visuels
Card
Card::elevated crée une surface thématisée avec padding, bordure, rayon et ombre intégrés.
TextInput
TextInput doit être lié à un State modifiable avant de devenir une vue. Les saisies de l'utilisateur mettent cet état à jour.
Button
Button::with_label construit un bouton principal avec le thème. Il reste visuel ici, puis le chapitre sur les actions le reliera au comportement de l'application.
Badge
Badge::dot ajoute un point sémantique en tête. Le ton et la variante recréent son style à partir du thème par défaut.
Icon
Icon::new utilise le catalogue public IconId. size et tint règlent sa taille logique et sa couleur.
Switch
Switch::bind relie un State<bool> dans les deux sens : le contrôle lit sa valeur et l'écrit lorsqu'il bascule.
Lié ou contrôlé ?
Utilisez bind lorsqu'un contrôle peut écrire directement dans State. Utilisez une valeur affichée avec on_change lorsqu'une action typée et la fonction de mise à jour centrale doivent garder la main. TextInput a toujours besoin d'une liaison modifiable avant de devenir une vue.
03
Assemblez les contrôles
Ajoutez les contrôles en trois extraits ciblés. Le champ possède des données modifiables, tandis que la ligne d'état reste visuelle jusqu'au chapitre sur les actions.
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 la valeur modifiable
State<String> est la valeur partagée que le champ lit et met à jour.
let task_title = State::new("Publish the tiny app".to_owned());Étape 2 : lier un champ de texte
bind est requis avant que TextInput devienne une vue. Les modifications de l'utilisateur sont d'abord écrites dans le State.
TextInput::new()
.bind(task_title.clone())
.placeholder("What shall we build?")
.width(420.0),Étape 3 : ajouter un état et un bouton
Badge porte un état sémantique. Button utilise le style de texte du thème, mais ne possède pas encore d'action.
Row::new()
.gap(12.0)
.child(
Badge::dot("Ready")
.tone(BadgeTone::Success),
)
.child(Button::<()>::with_label("Add task")),Vérifié avec Rust 1.88. La liaison du champ, la carte, le bouton, le badge et l'icône proviennent tous du prelude public.
Le visuel d'abord, les actions ensuite
Le bouton n'est volontairement pas encore relié. Le chapitre 7 introduit les actions de l'application et le retour immédiat par petites étapes.
À vous de jouer
Exercice : donnez un état à la carte
Construisez une carte compacte dans laquelle chaque contrôle possède un rôle évident.
- 1Ajoutez un TextInput lié à un titre et un Badge avec le ton Info.
- 2Ajoutez un Button secondaire et un Switch lié à un State<bool>. Le bouton peut rester visuel pour le moment.
Utilisez TextInput::bind et Switch::bind pour les liaisons directes. Utilisez with_label_variant pour le bouton secondaire.
La saisie modifie le champ, l'interrupteur bascule visiblement et les quatre contrôles restent lisibles dans une fenêtre étroite.