Widgets och layout
Bygg knappar, inmatningsfält och paneler.
Widgets och layout är en gratis lektion i Lär dig programmera i Rust på CoddyKit. Detta är lektion 2 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.
Widgetuppsättningen
egui levereras med ett rikt urval inbyggda widgetar: etiketter, rubriker, knappar, kryssrutor, radioknappar, reglage, dragvärden, textredigeringar, kombinationsrutor med mera.
Varje widget är en metod på Ui och returnerar en Response. Ni bygger ihop gränssnitt genom att anropa dem i följd i stället för att skapa instanser av klasser.
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 och Widget-traiten
Bekvämlighetsmetoder som ui.button kapslar in mer avancerade widgetstrukturer. För konfigurerbara widgetar bygger ni strukturen och skickar den till ui.add.
Allt som implementerar Widget-traiten fungerar med ui.add, inklusive era egna anpassade widgetar. Detta är den utbyggbara kärnan i eguis API.
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(); }Vertikal och horisontell layout
Som standard placerar en Ui widgetar uppifrån och ned. Anropa ui.horizontal(|ui| ...) för att placera dem från vänster till höger på en rad.
Dessa layout-closures kan nästlas fritt, så att ni kan bygga rader av kolumner och kolumner av rader med vanlig Rust-styrning.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Kolumner
För layouter med flera jämnt fördelade kolumner ger ui.columns(n, |cols| ...) er en slice med Ui-värden, en per kolumn.
Varje kolumn får samma bredd och ni lägger till widgetar i cols[i]. Detta är praktiskt för paneler eller formulär bredvid varandra.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Paneler
Strukturen på översta nivån kommer från paneler: TopBottomPanel för menyrader och statusfält, SidePanel för navigering och CentralPanel för huvudinnehållet.
Lägg till sido- och toppaneler först; CentralPanel fyller det utrymme som blir kvar. Ordningen spelar roll eftersom varje panel tar en kant i anspråk.
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");
});Rullningsbara områden
När innehållet överskrider det tillgängliga utrymmet omsluter ni det i en ScrollArea. Den beskär innehåll som sticker ut och lägger automatiskt till rullningslister.
Använd .auto_shrink([false, false]) för att låta området fylla regionen i stället för att krympa efter innehållet, och .stick_to_bottom(true) för loggvisningar.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Rutnät för formulär
egui::Grid justerar widgetar till en prydlig tabell med rader och kolumner – idealiskt för formulär med etiketter och värden.
Lägg till celler från vänster till höger och anropa ui.end_row() för att börja nästa rad. egui håller automatiskt kolumnerna justerade mellan raderna.
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();
});Mellanrum och justering
Finjustering görs med hjälpmetoder för mellanrum: ui.add_space(pixels) lägger in ett mellanrum och ui.separator() ritar en avskiljande linje.
För att justera innehåll använder ni ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...), vilket är det vanliga sättet att placera knappar vid högerkanten av en rad.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Flytande fönster
Utöver paneler skapar egui::Window ett flyttbart fönster som kan ändra storlek inuti ert program. Det passar utmärkt för verktygspaneler och dialogrutor.
Koppla synligheten till en bool med .open(&mut self.show) så att stängningsknappen växlar ert tillstånd.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Stil och utseende
Utseendet för varje widget styrs av ctx.style() och dess Visuals. Byt tema med ctx.set_visuals(egui::Visuals::dark()) eller light().
Ni kan justera mellanrum, avrundning och färger globalt genom att ändra stilen, vilket ger hela programmet ett enhetligt anpassat utseende.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Sätt ihop alla delar
Riktiga program nästlar dessa byggstenar: en toppanel med en meny, en vänsterpanel med navigering och en centralpanel som innehåller ett rutnät i ett rullningsbart område.
Eftersom layouten bara består av nästlade closures och vanlig styrning är det en kodändring att strukturera om en skärm, inte en operation på ett träd.
Snabb kontroll
Vilken panel bör ni lägga till sist?
Sammanfattning
egui erbjuder etiketter, reglage, textredigeringar med mera – allt som metoder på Ui som returnerar en Response, med ui.add för konfigurerbara widgetar.
Layout byggs av nästlade closures: horizontal, vertical, columns, Grid och ScrollArea. Paneler och Window definierar strukturen på översta nivån, och Visuals styr utseendet. Nästa steg är att hantera programtillstånd på ett tydligt sätt.
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 ”Widgets och layout” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Lär dig programmera i Rust, inklusive ”Widgets och layout”, 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 ”Widgets och layout”?
Bygg knappar, inmatningsfält och paneler. 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 2 av 4.
Hur lång tid tar lektionen ”Widgets och layout”?
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.