Composants et disposition
Construisez des boutons, des champs de saisie et des panneaux.
Composants et disposition est une leçon Learn Rust Coding gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Learn Rust Coding, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Learn Rust Coding comprend 4 leçons au total.
La palette de composants
egui fournit un riche ensemble de composants intégrés : libellés, titres, boutons, cases à cocher, boutons radio, curseurs, valeurs déplaçables, champs de texte, listes déroulantes et bien plus encore.
Chacun est une méthode de Ui et renvoie une Response. Vous composez les interfaces en les appelant successivement plutôt qu’en instanciant des classes.
ui.heading("Settings");
ui.checkbox(&mut self.dark, "Dark mode");
ui.add(egui::Slider::new(&mut self.volume, 0.0..=1.0).text("Volume"));
ui.text_edit_singleline(&mut self.name);ui.add et le trait Widget
Les méthodes pratiques comme ui.button encapsulent des structures de composants plus riches. Pour les composants configurables, construisez la structure et transmettez-la à ui.add.
Tout élément qui implémente le trait Widget fonctionne avec ui.add, y compris vos propres composants personnalisés. C’est le cœur extensible de l’API d’egui.
let slider = egui::Slider::new(&mut self.zoom, 0.5..=4.0)
.logarithmic(true)
.suffix("x");
let resp = ui.add(slider);
if resp.changed() { self.rerender(); }Disposition verticale et horizontale
Par défaut, un Ui dispose les composants de haut en bas. Appelez ui.horizontal(|ui| ...) pour les placer de gauche à droite sur une ligne.
Ces fermetures de disposition peuvent être imbriquées librement, ce qui vous permet de construire des lignes de colonnes et des colonnes de lignes à partir d’un simple flux de contrôle Rust.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Colonnes
Pour les dispositions en plusieurs colonnes régulièrement espacées, ui.columns(n, |cols| ...) vous fournit une tranche de valeurs Ui, une par colonne.
Chaque colonne a la même largeur et vous ajoutez les composants dans cols[i]. Cela est pratique pour les panneaux ou formulaires côte à côte.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Panneaux
La structure de niveau supérieur repose sur les panneaux : TopBottomPanel pour les barres de menus et d’état, SidePanel pour la navigation et CentralPanel pour le contenu principal.
Ajoutez d’abord les panneaux latéraux et supérieurs ; le CentralPanel occupe tout l’espace restant. L’ordre est important, car chaque panneau s’approprie son bord.
egui::TopBottomPanel::top("bar").show(ctx, |ui| {
ui.label("Menu");
});
egui::SidePanel::left("nav").show(ctx, |ui| {
ui.label("Sidebar");
});
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Main content");
});Zones de défilement
Lorsque le contenu dépasse l’espace disponible, encapsulez-le dans un ScrollArea. Celle-ci masque le débordement et ajoute automatiquement des barres de défilement.
Utilisez .auto_shrink([false, false]) pour qu’elle remplisse la région au lieu de s’adapter à la taille du contenu, et .stick_to_bottom(true) pour les affichages de journaux.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Grilles pour les formulaires
egui::Grid aligne les widgets dans un tableau ordonné de lignes et de colonnes — idéal pour les formulaires de type libellé/valeur.
Ajoutez les cellules de gauche à droite et appelez ui.end_row() pour commencer la ligne suivante. egui aligne automatiquement les colonnes entre les lignes.
egui::Grid::new("form").num_columns(2).show(ui, |ui| {
ui.label("Host");
ui.text_edit_singleline(&mut self.host);
ui.end_row();
ui.label("Port");
ui.add(egui::DragValue::new(&mut self.port));
ui.end_row();
});Espacement et alignement
Les assistants d’espacement offrent un contrôle précis : ui.add_space(pixels) insère un espace et ui.separator() trace une ligne de séparation.
Pour aligner le contenu, utilisez ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), l’idiome permettant de placer les boutons sur le bord droit d’une ligne.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Fenêtres flottantes
Au-delà des panneaux, egui::Window crée une fenêtre flottante déplaçable et redimensionnable dans votre App. Elle convient parfaitement aux palettes d’outils et aux boîtes de dialogue.
Lièz sa visibilité à un bool avec .open(&mut self.show) afin que le bouton de fermeture bascule votre état.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Style et apparence
L’apparence de chaque widget est régie par ctx.style() et ses Visuals. Changez de thème avec ctx.set_visuals(egui::Visuals::dark()) ou light().
Vous pouvez modifier globalement l’espacement, l’arrondi et les couleurs en changeant le style, afin de donner à toute l’App une apparence personnalisée et cohérente.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Assembler le tout
Les applications réelles imbriquent ces primitives : un menu dans un panneau supérieur, un panneau latéral gauche pour la navigation et un panneau central contenant une grille dans une zone de défilement.
Comme la mise en page repose simplement sur des fermetures imbriquées et un flux de contrôle ordinaire, restructurer un écran consiste à modifier le code, et non à effectuer une opération complexe sur un arbre.
Vérification rapide
Quel panneau devez-vous ajouter en dernier ?
Récapitulatif
egui propose des libellés, des curseurs, des champs de texte et bien plus encore — tous sous forme de méthodes de Ui renvoyant une Response, avec ui.add pour les widgets configurables.
La mise en page est construite à partir de fermetures imbriquées : horizontal, vertical, columns, Grid et ScrollArea. Les panneaux et Window définissent la structure de premier niveau, tandis que Visuals contrôle le style. Ensuite : gérer proprement l’état de l’application.
Questions Fréquemment Posées
La leçon « Composants et disposition » est-elle gratuite ?
Oui — le texte complet de « Composants et disposition » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Learn Rust Coding, passe à CoddyKit PRO. Le cours Learn Rust Coding comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants et disposition » ?
Construisez des boutons, des champs de saisie et des panneaux. Tu pratiques Learn Rust Coding avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Learn Rust Coding ?
Aucune expérience préalable n'est requise. Learn Rust Coding sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Composants et disposition » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Learn Rust Coding ?
Oui. Chaque leçon Learn Rust Coding inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases de l’interface en mode immédiat
- Composants et disposition
- Gérer l’état de l’application
- Empaqueter une application de bureau