Widgets und Layout
Erstellen Sie Schaltflächen, Eingaben und Panels.
Widgets und Layout ist eine kostenlose Learn Rust Coding-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Die Widget-Palette
egui enthält eine umfangreiche Auswahl integrierter Widgets: Beschriftungen, Überschriften, Schaltflächen, Checkboxen, Radiobuttons, Schieberegler, Ziehwerte, Texteingaben, Kombinationsfelder und vieles mehr.
Jedes Widget ist eine Methode auf Ui und gibt eine Response zurück. Sie setzen UIs zusammen, indem Sie die Methoden nacheinander aufrufen, statt Klassen zu instanziieren.
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 und das Widget-Trait
Komfortmethoden wie ui.button kapseln umfangreichere Widget-Strukturen. Bei konfigurierbaren Widgets erstellen Sie die Struktur und übergeben sie an ui.add.
Alles, was das Widget-Trait implementiert, funktioniert mit ui.add – auch Ihre eigenen benutzerdefinierten Widgets. Das ist der erweiterbare Kern der egui-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(); }Vertikales und horizontales Layout
Standardmäßig ordnet ein Ui die Widgets von oben nach unten an. Rufen Sie ui.horizontal(|ui| ...) auf, um sie innerhalb einer Zeile von links nach rechts zu platzieren.
Diese Layout-Closures lassen sich frei verschachteln. So können Sie mit gewöhnlichen Rust-Kontrollstrukturen Zeilen aus Spalten und Spalten aus Zeilen erstellen.
ui.horizontal(|ui| {
ui.label("Name:");
ui.text_edit_singleline(&mut self.name);
});
ui.vertical(|ui| {
ui.button("One");
ui.button("Two");
});Spalten
Für gleichmäßig verteilte Layouts mit mehreren Spalten liefert ui.columns(n, |cols| ...) ein Slice aus Ui-Werten – einen pro Spalte.
Jede Spalte erhält dieselbe Breite, und Sie fügen Widgets in cols[i] ein. Das ist praktisch für nebeneinander angeordnete Bereiche oder Formulare.
ui.columns(2, |cols| {
cols[0].label("Left column");
cols[0].button("A");
cols[1].label("Right column");
cols[1].button("B");
});Bereiche
Die Struktur der obersten Ebene entsteht durch Bereiche: TopBottomPanel für Menü- und Statusleisten, SidePanel für die Navigation und CentralPanel für den Hauptinhalt.
Fügen Sie Seiten- und obere Bereiche zuerst hinzu; der CentralPanel füllt den verbleibenden Platz. Die Reihenfolge ist wichtig, da jeder Bereich seine Kante beansprucht.
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");
});Scrollbereiche
Wenn der Inhalt den verfügbaren Platz überschreitet, umschließen Sie ihn mit einem ScrollArea. Dieses schneidet überstehenden Inhalt ab und fügt automatisch Bildlaufleisten hinzu.
Verwenden Sie .auto_shrink([false, false]), damit der Bereich die Region ausfüllt, statt auf die Inhaltsgröße zu schrumpfen, und .stick_to_bottom(true) für Protokollansichten.
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
for line in &self.log {
ui.label(line);
}
});Raster für Formulare
egui::Grid richtet Widgets in einer übersichtlichen Tabelle aus Zeilen und Spalten aus – ideal für Formulare mit Bezeichnungen und Werten.
Fügen Sie Zellen von links nach rechts hinzu und rufen Sie ui.end_row() auf, um die nächste Zeile zu beginnen. egui hält die Spalten über mehrere Zeilen hinweg automatisch ausgerichtet.
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();
});Abstände und Ausrichtung
Feinsteuerung ermöglichen Abstandshilfen: ui.add_space(pixels) fügt eine Lücke ein, und ui.separator() zeichnet eine Trennlinie.
Verwenden Sie zur Ausrichtung des Inhalts ui.with_layout(Layout::right_to_left(Align::Center), |ui| ...). Dies ist das übliche Muster, um Schaltflächen an den rechten Rand einer Zeile zu schieben.
ui.horizontal(|ui| {
ui.label("Title");
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
ui.button("Close");
});
});Schwebende Fenster
Zusätzlich zu Bereichen erstellt egui::Window ein verschiebbares und in der Größe veränderbares schwebendes Fenster innerhalb Ihrer Anwendung. Es eignet sich hervorragend für Werkzeugpaletten und Dialoge.
Binden Sie seine Sichtbarkeit mit .open(&mut self.show) an einen bool, damit die Schaltfläche zum Schließen Ihren Zustand umschaltet.
egui::Window::new("Inspector")
.open(&mut self.show_inspector)
.resizable(true)
.show(ctx, |ui| {
ui.label("Properties...");
});Gestaltung und Darstellung
Das Erscheinungsbild jedes Widgets wird durch ctx.style() und dessen Visuals bestimmt. Wechseln Sie das Theme mit ctx.set_visuals(egui::Visuals::dark()) oder light().
Sie können Abstände, Rundungen und Farben global anpassen, indem Sie den Style verändern. So erhält die gesamte Anwendung ein einheitliches, individuelles Erscheinungsbild.
ctx.set_visuals(if self.dark {
egui::Visuals::dark()
} else {
egui::Visuals::light()
});Alles zusammensetzen
Reale Anwendungen verschachteln diese Grundelemente: ein Menü im oberen Bereich, ein linker Seitenbereich für die Navigation und ein zentraler Bereich mit einem Raster innerhalb eines Scrollbereichs.
Da das Layout lediglich aus verschachtelten Closures und gewöhnlichen Kontrollstrukturen besteht, lässt sich ein Bildschirm durch eine Codeänderung umstrukturieren – ohne aufwendige Änderungen an einem UI-Baum.
Kurze Überprüfung
Welchen Bereich sollten Sie zuletzt hinzufügen?
Zusammenfassung
egui bietet Beschriftungen, Schieberegler, Texteingaben und vieles mehr – alles Methoden auf Ui, die eine Response zurückgeben. Für konfigurierbare Widgets steht ui.add zur Verfügung.
Layouts entstehen aus verschachtelten Closures: horizontal, vertical, columns, Grid und ScrollArea. Bereiche und Window definieren die Struktur der obersten Ebene, während Visuals die Gestaltung steuern. Als Nächstes geht es um die saubere Verwaltung des Anwendungszustands.
Häufig gestellte Fragen
Ist die Lektion „Widgets und Layout“ kostenlos?
Ja — der vollständige Text von „Widgets und Layout“ 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 „Widgets und Layout“?
Erstellen Sie Schaltflächen, Eingaben und Panels. 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 2 von 4.
Wie lange dauert die Lektion „Widgets und Layout“?
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.