Prüfstand: Die Beispielprojekte wurden noch nicht mit Cargo und als GUI verifiziert. Sie sind Lernmaterial; ihre Ausführbarkeit ist noch zu prüfen.

Teil 08 – Layouts und Scrollbereiche

Lernziel: Auf kleine Fenster reagieren.
Voraussetzung: Rust Desktop – Teil 07.
Dauer: etwa 20–35 Minuten einschließlich eigener Übung.

Worum geht es?

vertical, horizontal und ScrollArea. Die Lektion verwendet eine kleine, überschaubare Desktop-Anwendung, die du selbst startest, veränderst und testest. Die folgenden Schritte sind auf Windows und Linux übertragbar.

Das solltest du verstehen

Ein Layout muss nicht auf feste Pixelpositionen setzen. ScrollArea sorgt dafür, dass auch große Datenmengen in einem kleinen Fenster zugänglich bleiben.

Projekt vorbereiten

Im Kursarchiv befindet sich ein vollständiges Cargo-Projekt unter beispielprojekte/teil-08/. Öffne den Ordner mit VS Code oder wechsle im Terminal hinein.

cd beispielprojekte/teil-08
cargo run

Es werden die im jeweiligen Cargo.toml festgelegten Abhängigkeiten benötigt. Die erste Kompilierung kann länger dauern. Kopiere für Experimente das Projekt in einen eigenen Arbeitsordner.

Cargo.toml

[package]
name = "rust_desktop_teil_08"
version = "0.1.0"
edition = "2024"

[dependencies]
eframe = "=0.37.0"

Vollständiges Beispiel (src/main.rs)

use eframe::egui;

#[derive(Default)]
struct DemoApp {
    filter: String,
}

impl eframe::App for DemoApp {
    fn ui(&mut self, ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
        ui.horizontal(|ui| {ui.label("Filter:"); ui.text_edit_singleline(&mut self.filter);});
        egui::ScrollArea::vertical().show(ui, |ui| {
         for i in 0..100 { let item = format!("Messung {i}"); if item.contains(&self.filter) { ui.label(item); } }
        });
    }
}

fn main() -> eframe::Result {
    eframe::run_native(
        "Rust Desktop – Lektion 08",
        eframe::NativeOptions::default(),
        Box::new(|_cc| Ok(Box::<DemoApp>::default())),
    )
}

Schrittweise ausprobieren

1. Starte das Beispiel mit cargo run und beobachte, welche Elemente im Fenster erscheinen.
2. Suche im Quelltext die Felder von DemoApp. Diese Daten bilden den Zustand der Anwendung.
3. Suche nach impl eframe::App und der Methode ui(). Dort wird festgelegt, was die Anwendung anzeigt.
4. Ändere zunächst nur einen Text oder Zahlenwert und starte die Anwendung erneut.
5. Vergleiche anschließend das Verhalten nach einer Benutzereingabe mit dem gespeicherten Zustand.

Kontrollfrage: Was würde passieren, wenn du einen wichtigen Wert als lokale Variable innerhalb von ui() neu initialisierst, statt ihn in DemoApp zu speichern?

Übungsaufgabe

Füge eine zusätzliche scrollbare Liste hinzu.

Versuche die Änderung zunächst ohne Musterlösung. Lies Compiler-Fehlermeldungen vollständig und prüfe zuerst die betroffene Zeile.

Typische Probleme

• cargo wird nicht gefunden: Prüfe die Rust-Installation und starte das Terminal neu.
• Abhängigkeiten laden nicht: Prüfe Internetverbindung und Versionsangaben in Cargo.toml.
• Ein Compilerfehler erscheint: Kontrolliere die betroffene Zeile, Klammern und Datentypen; vermeide reflexhaft unwrap().
• Die Änderung verschwindet: Ein zustandsrelevanter Wert gehört wahrscheinlich in DemoApp.
• Linux öffnet kein Fenster: Prüfe installierte Grafik- und Entwicklungspakete für die verwendete Distribution.

Wissenscheck

• Kannst du in eigenen Worten erklären, was dieses Beispiel demonstriert?
• Welche Daten werden in DemoApp gespeichert und warum?
• Was unterscheidet eine Benutzereingabe von einer rein grafischen Anzeige?
• Wie würdest du die Funktion ohne Hilfestellung erweitern?

Weiterlernen

← Vorherige Lektion · Kursübersicht · Nächste Lektion →

Know-How-Schmiede · Rust Desktop-Kurs. Die Beispielprojekte sind Lernmaterial und sollten vor der Veröffentlichung lokal mit deiner Werkzeugkette geprüft werden.

Desktop-Kurs mit Beispielprojekten herunterladen