Widgets en lay-out
Bouw knoppen, invoervelden en panelen.
Widgets en lay-out is een gratis Leer programmeren met Rust-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Leer programmeren met Rust. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Leer programmeren met Rust bevat in totaal 4 lessen.
Het widgetaanbod
egui wordt geleverd met een uitgebreide set ingebouwde widgets: labels, koppen, knoppen, selectievakjes, keuzerondjes, schuifregelaars, sleepwaarden, tekstbewerkingen, keuzelijsten en meer.
Elke widget is een methode op Ui en geeft een Response terug. Je stelt UI's samen door ze na elkaar aan te roepen in plaats van classes te instantiëren.
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 en de Widget-trait
Gemaksmethoden zoals ui.button verpakken uitgebreidere widgetstructs. Voor configureerbare widgets bouw je de struct op en geef je die door aan ui.add.
Alles wat de Widget-trait implementeert, werkt met ui.add, ook je eigen aangepaste widgets. Dit is de uitbreidbare kern van de API van 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(); }Verticale en horizontale indeling
Standaard deelt een Ui widgets van boven naar beneden in. Roep ui.horizontal(|ui| ...) aan om ze binnen een rij van links naar rechts te plaatsen.
Deze indelingsclosures kunnen vrij worden genest, zodat je met gewone Rust-besturingslogica rijen van kolommen en kolommen van rijen kunt bouwen.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Kolommen
Voor indelingen met meerdere gelijkmatig verdeelde kolommen geeft ui.columns(n, |cols| ...) je een slice met Ui-waarden, één per kolom.
Elke kolom krijgt dezelfde breedte en je voegt widgets toe aan cols[i]. Dit is handig voor panelen of formulieren naast elkaar.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Panelen
De structuur op het hoogste niveau komt van panelen: TopBottomPanel voor menubalken en statusbalken, SidePanel voor navigatie en CentralPanel voor de hoofdinhoud.
Voeg zij- en bovenpanelen eerst toe; de CentralPanel vult de overgebleven ruimte. De volgorde is belangrijk omdat elk paneel zijn rand opeist.
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");
});Schuifgebieden
Wanneer de inhoud groter is dan de beschikbare ruimte, wikkel je die in een ScrollArea. Deze knipt overlopende inhoud af en voegt automatisch schuifbalken toe.
Gebruik .auto_shrink([false, false]) om het gebied te laten vullen in plaats van het tot de inhoud te verkleinen, en .stick_to_bottom(true) voor logweergaven.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Rasterindelingen voor formulieren
egui::Grid lijnt widgets uit in een nette tabel met rijen en kolommen — ideaal voor formulieren met labels en waarden.
Voeg cellen van links naar rechts toe en roep ui.end_row() aan om de volgende rij te beginnen. egui houdt kolommen automatisch uitgelijnd over de rijen heen.
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();
});Ruimte en uitlijning
Voor fijnmazige controle gebruik je hulpmethoden voor ruimte: ui.add_space(pixels) voegt een tussenruimte toe en ui.separator() tekent een scheidingslijn.
Gebruik voor het uitlijnen van inhoud ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...). Dit is de gebruikelijke manier om knoppen naar de rechterrand van een rij te duwen.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Zwevende vensters
Naast panelen maakt egui::Window een verplaatsbaar en aanpasbaar zwevend venster binnen je app. Dit is ideaal voor gereedschapspaletten en dialoogvensters.
Koppel de zichtbaarheid aan een bool met .open(&mut self.show), zodat de sluitknop je status omschakelt.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Stijlen en uiterlijk
Het uiterlijk van elke widget wordt bepaald door ctx.style() en zijn Visuals. Wissel van thema met ctx.set_visuals(egui::Visuals::dark()) of light().
Je kunt ruimte, afrondingen en kleuren globaal aanpassen door de stijl te wijzigen, zodat de hele app een consistent aangepast uiterlijk krijgt.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Alles samenstellen
Echte apps nesten deze bouwstenen: een bovenpaneel met een menu, een linkerzijpaneel met navigatie en een centraal paneel met een raster binnen een schuifgebied.
Omdat de indeling alleen uit geneste closures en gewone besturingslogica bestaat, is het herstructureren van een scherm een codewijziging en geen operatie waarbij je een boom moet verbouwen.
Korte controle
Welk paneel moet je als laatste toevoegen?
Samenvatting
egui biedt labels, schuifregelaars, tekstbewerkingen en meer — allemaal methoden op Ui die een Response teruggeven, met ui.add voor configureerbare widgets.
De indeling wordt opgebouwd uit geneste closures: horizontal, vertical, columns, Grid en ScrollArea. Panelen en Window bepalen de structuur op het hoogste niveau en Visuals regelt de stijl. Vervolgens: applicatiestatus netjes beheren.
Leer Rust met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 39
- Lessen
- 144
Veelgestelde vragen
Is de les “Widgets en lay-out” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Leer programmeren met Rust, waaronder “Widgets en lay-out”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Leer programmeren met Rust bevat in totaal 4 lessen.
Wat leer ik in “Widgets en lay-out”?
Bouw knoppen, invoervelden en panelen. Je oefent met Leer programmeren met Rust door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Leer programmeren met Rust te beginnen?
Ervaring vooraf is niet nodig. Leer programmeren met Rust op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Widgets en lay-out”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Leer programmeren met Rust?
Ja. Elke les over Leer programmeren met Rust bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.