Bases de l’interface en mode immédiat
Comprenez comment egui effectue le rendu.
Bases de l’interface en mode immédiat est une leçon Learn Rust Coding gratuite sur CoddyKit. Ceci est la leçon 1 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.
Ce que signifie le mode immédiat
egui est une bibliothèque d’interface graphique en mode immédiat. Contrairement aux boîtes à outils en mode conservé (GTK, Qt), dans lesquelles vous construisez un arbre persistant de composants, egui reconstruit toute l’interface à partir de zéro à chaque image.
Votre code s’exécute de haut en bas à chaque image et émet des composants sous forme d’appels de fonctions. Aucun graphe de nœuds n’est conservé : l’interface est simplement un effet secondaire de l’exécution de votre fermeture.
La boucle de mise à jour
Une application egui implémente eframe::App, dont la méthode update est appelée une fois par image, généralement 60 fois par seconde.
Dans update, vous décrivez l’apparence que l’interface doit avoir à cet instant, en fonction de l’état actuel. egui ne calcule aucune différence : elle réémet simplement tous les éléments.
impl eframe::App for MyApp {
fn update(&mut self, ctx: &egui::Context, _f: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
ui.label("Hello, egui!");
});
}
}Contexte et Ui
Deux types fondamentaux apparaissent partout. egui::Context est le handle partagé, peu coûteux à cloner, qui donne accès à tout l’état de l’interface pour l’image en cours.
Ui est une région dans laquelle vous ajoutez des composants. Les panneaux et les fenêtres vous fournissent un &mut Ui dans leur fermeture ; vous appelez dessus des méthodes telles que ui.label ou ui.button.
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Dashboard");
ui.separator();
ui.label("Widgets go here.");
});Les composants renvoient des réponses
Puisque l’interface est reconstruite à chaque image, vous ne pouvez pas enregistrer de rappels comme le font les boîtes à outils en mode conservé. À la place, chaque appel de composant renvoie immédiatement une Response.
Vous examinez la Response pendant la même image : .clicked(), .hovered(), .changed(). La gestion des événements reste ainsi directement intégrée à la disposition.
if ui.button("Save").clicked() {
self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
self.dirty = true;
}L’état vous appartient
egui ne stocke presque aucune donnée de l’application. Les valeurs de vos composants résident dans self, dans la structure App, et vous transmettez des références mutables aux composants.
Un champ de texte accepte &mut String ; une case à cocher accepte &mut bool. egui réécrit les valeurs via la référence, de sorte que votre structure constitue l’unique source de vérité.
struct MyApp {
name: String,
enabled: bool,
}
// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");Configurer eframe
eframe est le framework officiel qui héberge egui sur ordinateur et sur le Web. Il gère la fenêtre native, la surface GPU et la boucle d’événements.
Vous le lancez avec eframe::run_native, en transmettant un titre de fenêtre, les options natives et une fermeture qui construit votre App.
fn main() -> eframe::Result<()> {
let opts = eframe::NativeOptions::default();
eframe::run_native(
"My App",
opts,
Box::new(|_cc| Ok(Box::new(MyApp::default()))),
)
}Re dessin déclenché par les entrées
Par défaut, egui ne redessine l’interface que lorsqu’un événement survient : déplacement de la souris, pression d’une touche ou demande explicite. Cela économise le CPU lorsque l’application est inactive.
Pour les animations ou les données en temps réel, appelez ctx.request_repaint() pour planifier une nouvelle image, ou request_repaint_after avec une durée pour effectuer des mises à jour temporisées.
ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animatingPas d’identifiants persistants pour les composants (en général)
egui déduit l’identité d’un composant à partir de l’ordre et de la position des appels, en générant automatiquement un Id. Cela est important pour les éléments tels que les en-têtes repliables, qui nécessitent une mémoire stable entre les images.
Lorsque deux composants entreraient en collision — par exemple des boutons portant le même libellé dans une boucle — encapsulez-les avec ui.push_id(i, |ui| ...) pour les différencier.
for (i, item) in self.items.iter().enumerate() {
ui.push_id(i, |ui| {
if ui.button(&item.label).clicked() {
println!("clicked {}", i);
}
});
}Compromis du mode immédiat
Le mode immédiat rend le code de l’interface naturellement piloté par les données : un if affiche ou masque une section, et un for génère une liste. Il n’est pas nécessaire d’ajouter ou de supprimer manuellement des nœuds, et le modèle et la vue ne peuvent pas se désynchroniser.
En contrepartie, toute l’interface est réexécutée à chaque image. Gardez donc le travail effectué à chaque image peu coûteux et évitez les calculs lourds dans update.
if self.logged_in {
ui.label(format!("Welcome, {}", self.user));
} else {
ui.label("Please sign in.");
}Application complète minimale
En résumé : une structure contient l’état, update l’affiche et main exécute la fenêtre. C’est l’ossature complète de tout programme egui pour ordinateur.
Tout le reste — disposition, thème, empaquetage — repose sur cette boucle.
#[derive(Default)]
struct App { count: i32 }
impl eframe::App for App {
fn update(&mut self, ctx: &egui::Context, _: &mut eframe::Frame) {
egui::CentralPanel::default().show(ctx, |ui| {
if ui.button("+1").clicked() { self.count += 1; }
ui.label(format!("Count: {}", self.count));
});
}
}Pourquoi Rust aime egui
La conception d’egui met à profit les points forts de Rust. Emprunter &mut self dans un unique appel à update permet au vérificateur d’emprunts de garantir l’absence de courses de données entre les composants et votre modèle.
Aucun rappel ne capture un état mutable partagé, et aucun graphe Rc<RefCell> n’est imposé par un arbre conservé : vous disposez simplement de la propriété ordinaire et d’un seul parcours mutable par image.
Vérification rapide
Vérifiez votre compréhension du mode immédiat.
Récapitulatif
egui fonctionne en mode immédiat : toute l’interface est reconstruite à chaque image dans eframe::App::update. Les composants sont des appels de fonctions qui renvoient une Response que vous examinez immédiatement.
Vos données résident dans self et sont transmises par référence mutable ; le vérificateur d’emprunts maintient ainsi le modèle et la vue synchronisés. eframe::run_native héberge la fenêtre et la boucle d’événements. Nous allons maintenant explorer la palette de composants et le système de disposition.
Questions Fréquemment Posées
La leçon « Bases de l’interface en mode immédiat » est-elle gratuite ?
Oui — le texte complet de « Bases de l’interface en mode immédiat » 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 « Bases de l’interface en mode immédiat » ?
Comprenez comment egui effectue le rendu. 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 1 sur 4.
Combien de temps prend la leçon « Bases de l’interface en mode immédiat » ?
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