Grunderna i immediate-mode-UI
Förstå hur egui renderar.
Grunderna i immediate-mode-UI är en gratis lektion i Lär dig programmera i Rust på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Lär dig programmera i Rust, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Lär dig programmera i Rust innehåller totalt 4 lektioner.
Vad immediate mode innebär
egui är ett GUI-bibliotek i immediate mode. Till skillnad från verktygslådor i retained mode (GTK, Qt), där du bygger ett beständigt widgetträd, bygger egui om hela gränssnittet från grunden i varje frame.
Din kod körs uppifrån och ned i varje frame och skapar widgets som funktionsanrop. Det finns ingen lagrad nodgraf – gränssnittet är bara en bieffekt av att din closure körs.
Uppdateringsloopen
En egui-app implementerar eframe::App, vars update-metod anropas en gång per frame, vanligtvis 60 gånger per sekund.
I update beskriver du hur gränssnittet ska se ut just nu, utifrån det aktuella tillståndet. egui jämför ingenting – den återskapar helt enkelt allt.
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 och Ui
Två centrala typer förekommer överallt. egui::Context är en delad handle som är billig att klona och som representerar hela gränssnittets tillstånd för den aktuella framen.
Ui är ett område som du lägger widgets i. Paneler och fönster ger dig en &mut Ui i sin closure; du anropar metoder som ui.label eller ui.button på den.
egui::CentralPanel::default().show(ctx, |ui| {
ui.heading("Dashboard");
ui.separator();
ui.label("Widgets go here.");
});Widgets returnerar responses
Eftersom gränssnittet byggs om i varje frame kan du inte registrera callbacks på samma sätt som i retained-mode-verktygslådor. I stället returnerar varje widget-anrop omedelbart en Response.
Du inspekterar Response i samma frame: .clicked(), .hovered(), .changed(). Det håller händelsehanteringen nära layouten.
if ui.button("Save").clicked() {
self.save();
}
let resp = ui.text_edit_singleline(&mut self.name);
if resp.changed() {
self.dirty = true;
}Tillståndet finns hos dig
egui lagrar nästan inga programdata. Widgetarnas värden finns i self i strukturen App, och ni skickar muterbara referenser till widgetarna.
Ett textfält tar emot &mut String, och en kryssruta tar emot &mut bool. egui skriver tillbaka via referensen, så er struktur är den enda sanningskällan.
struct MyApp {
name: String,
enabled: bool,
}
// inside update:
ui.text_edit_singleline(&mut self.name);
ui.checkbox(&mut self.enabled, "Enabled");Konfigurera eframe
eframe är det officiella ramverket som kör egui på datorer och webben. Det hanterar det inbyggda fönstret, GPU-ytan och händelseloopen.
Ni startar med eframe::run_native och skickar med en fönstertitel, inbyggda alternativ och en closure som bygger er App.
fn main() -> eframe::Result<()> {
let opts = eframe::NativeOptions::default();
eframe::run_native(
"My App",
opts,
Box::new(|_cc| Ok(Box::new(MyApp::default()))),
)
}Ommålning styrd av indata
Som standard målar egui bara om när något händer: musen flyttas, en tangent trycks ned eller en uttrycklig begäran görs. Det sparar CPU i inaktiva program.
För animeringar eller data i realtid kan ni anropa ctx.request_repaint() för att schemalägga en ny bildruta, eller request_repaint_after med en tidslängd för tidsstyrda uppdateringar.
ui.label(format!("Tick: {}", self.counter));
self.counter += 1;
ctx.request_repaint(); // keep animatingInga beständiga widget-ID:n (för det mesta)
egui härleder widgetens identitet från anropsordning och position och genererar automatiskt ett Id. Detta är viktigt för exempelvis expanderbara rubriker som behöver ha stabilt minne mellan bildrutorna.
När två widgetar skulle få samma identitet – exempelvis knappar med samma etikett i en loop – omsluter ni dem med ui.push_id(i, |ui| ...) för att skilja dem åt.
for (i, item) in self.items.iter().enumerate() {
ui.push_id(i, |ui| {
if ui.button(&item.label).clicked() {
println!("clicked {}", i);
}
});
}Avvägningar med immediate mode
Immediate mode gör gränssnittskoden direkt datastyrd: en if visar eller döljer en sektion, och en for renderar en lista. Ni behöver varken lägga till eller ta bort noder manuellt, och modellen och vyn kan inte hamna ur synk.
Nackdelen är att hela gränssnittet körs om i varje bildruta, så håll arbetet per bildruta enkelt och undvik tunga beräkningar i update.
if self.logged_in {
ui.label(format!("Welcome, {}", self.user));
} else {
ui.label("Please sign in.");
}Minimalt komplett program
Om vi sätter ihop delarna: en struktur innehåller tillståndet, update ritar upp det och main kör fönstret. Detta är hela grundstrukturen för alla egui-program för datorer.
Allt annat – layout, teman och paketering – bygger vidare på denna 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));
});
}
}Varför Rust passar egui
egui:s design utnyttjar Rustrs styrkor. När &mut self lånas in i ett enda anrop till update garanterar borrow checkern att det inte uppstår några datarace mellan widgetarna och er modell.
Det finns inga callbacks som fångar delat muterbart tillstånd och inga Rc<RefCell>-grafer som en beständig trädstruktur tvingar fram – bara vanlig äganderätt och en muterbar genomgång per bildruta.
Snabb kontroll
Testa hur väl ni förstår immediate mode.
Sammanfattning
egui använder immediate mode: hela gränssnittet byggs om i varje bildruta inuti eframe::App::update. Widgetar är funktionsanrop som returnerar en Response som ni granskar direkt.
Era data finns i self och skickas som en muterbar referens, så borrow checkern håller modell och vy synkroniserade. eframe::run_native hanterar fönstret och händelseloopen. Nästa steg är att utforska widgetuppsättningen och layoutsystemet.
Lär dig Rust med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 39
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Grunderna i immediate-mode-UI” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Lär dig programmera i Rust, inklusive ”Grunderna i immediate-mode-UI”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Lär dig programmera i Rust innehåller totalt 4 lektioner.
Vad lär jag mig i ”Grunderna i immediate-mode-UI”?
Förstå hur egui renderar. Ni övar på Lär dig programmera i Rust med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Lär dig programmera i Rust?
Du behöver inga förkunskaper. Utbildningen i Lär dig programmera i Rust på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Grunderna i immediate-mode-UI”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Lär dig programmera i Rust-lektionen?
Ja. Varje Lär dig programmera i Rust-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i immediate-mode-UI
- Widgets och layout
- Hantera apptillstånd
- Paketera en skrivbordsapp