Grundlagen der Immediate-Mode-UI
Verstehen Sie, wie egui rendert.
Grundlagen der Immediate-Mode-UI ist eine kostenlose Learn Rust Coding-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Learn Rust Coding-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Learn Rust Coding-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
What Immediate Mode Means
egui is an immediate-mode GUI library. Unlike retained-mode toolkits (GTK, Qt) where you build a persistent widget tree, egui rebuilds the entire UI from scratch on every frame.
Your code runs top-to-bottom each frame, emitting widgets as function calls. There is no stored node graph — the UI is just a side effect of running your closure.
The Update Loop
An egui app implements eframe::App, whose update method is called once per frame, typically 60 times a second.
Inside update you describe what the UI should look like right now, given current state. egui diffs nothing — it simply re-emits everything.
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!");
});
}
}Context and Ui
Two core types appear everywhere. egui::Context is the shared, cheaply-cloneable handle to the whole UI state for the frame.
Ui is a region you add widgets into. Panels and windows hand you a &mut Ui inside their closure; you call methods like ui.label or ui.button on it.
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Dashboard");
ui.separator();
ui.label("Widgets go here.");
});Widgets Return Responses
Because the UI is rebuilt each frame, you cannot register callbacks the way retained toolkits do. Instead, every widget call returns a Response immediately.
You inspect the Response in the same frame: .clicked(), .hovered(), .changed(). This keeps event handling inline with layout.
if ui.button("Save").clicked() {
self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
self.dirty = true;
}State Lives in You
egui stores almost no application data. Your widget values live in self on the App struct, and you pass mutable references into widgets.
A text field takes &mut String; a checkbox takes &mut bool. egui writes back through the reference, so your struct is the single source of truth.
struct MyApp {
name: String,
enabled: bool,
}
// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");Setting Up eframe
eframe is the official framework that hosts egui on desktop and web. It owns the native window, the GPU surface, and the event loop.
You launch with eframe::run_native, passing a window title, native options, and a closure that builds your App.
fn main() -> eframe::Result<()> {
let opts = eframe::NativeOptions::default();
eframe::run_native(
"My App",
opts,
Box::new(|_cc| Ok(Box::new(MyApp::default()))),
)
}Repaint Driven by Input
By default egui only repaints when something happens: mouse move, key press, or an explicit request. This saves CPU on idle apps.
For animations or live data, call ctx.request_repaint() to schedule another frame, or request_repaint_after with a duration for timed updates.
ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animatingNo Retained Widget IDs (Mostly)
egui derives widget identity from call order and position, generating an Id automatically. This matters for things like collapsing headers that need stable memory between frames.
When two widgets would collide — e.g. buttons with the same label in a loop — wrap them with ui.push_id(i, |ui| ...) to disambiguate.
for (i, item) in self.items.iter().enumerate() {
ui.push_id(i, |ui| {
if ui.button(&item.label).clicked() {
println!("clicked {}", i);
}
});
}Immediate Mode Trade-offs
Immediate mode makes UI code trivially data-driven: an if shows or hides a section, a for renders a list. There is no manual add/remove of nodes and no desync between model and view.
The cost is that the whole UI re-runs each frame, so keep per-frame work cheap and avoid heavy computation inside update.
if self.logged_in {
ui.label(format!("Welcome, {}", self.user));
} else {
ui.label("Please sign in.");
}Minimal Complete App
Putting it together: a struct holds state, update draws it, and main runs the window. This is the entire skeleton of any egui desktop program.
Everything else — layout, theming, packaging — builds on this loop.
#[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));
});
}
}Why Rust Loves egui
egui's design plays to Rust's strengths. Borrowing &mut self into a single update call means the borrow checker guarantees no data races between widgets and your model.
There are no callbacks capturing shared mutable state, no Rc<RefCell> graphs forced by a retained tree — just plain ownership and one mutable pass per frame.
Quick Check
Test your grasp of immediate mode.
Recap
egui is immediate-mode: the whole UI is rebuilt each frame inside eframe::App::update. Widgets are function calls that return a Response you inspect right away.
Your data lives in self and is passed by mutable reference, so the borrow checker keeps model and view in sync. eframe::run_native hosts the window and event loop. Next we explore the widget palette and layout system.
Häufig gestellte Fragen
Ist die Lektion „Grundlagen der Immediate-Mode-UI“ kostenlos?
Ja — der vollständige Text von „Grundlagen der Immediate-Mode-UI“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Learn Rust Coding-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Learn Rust Coding-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grundlagen der Immediate-Mode-UI“?
Verstehen Sie, wie egui rendert. Du übst Learn Rust Coding mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Learn Rust Coding zu starten?
Keine Vorkenntnisse erforderlich. Learn Rust Coding auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Grundlagen der Immediate-Mode-UI“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Learn Rust Coding-Lektion Code schreiben und ausführen?
Ja. Jede Learn Rust Coding-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grundlagen der Immediate-Mode-UI
- Widgets und Layout
- App-Zustand verwalten
- Eine Desktop-App paketieren