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 18 – Farben und Design

Lernziel: Dark Mode und Light Mode umschalten.
Voraussetzung: Rust Desktop – Teil 17.
Dauer: etwa 20–35 Minuten einschließlich eigener Übung.

Worum geht es?

Visuelle Gestaltung mit egui. 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

egui stellt helle und dunkle Visuals bereit. Ein eigenes Gestaltungssystem sollte lesbare Kontraste und einheitliche Abstände beachten.

Projekt vorbereiten

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

cd beispielprojekte/teil-18
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_18"
version = "0.1.0"
edition = "2024"

[dependencies]
eframe = "=0.37.0"

Vollständiges Beispiel (src/main.rs)

use eframe::egui;

#[derive(Default)]
struct DemoApp {
    dark: bool,
}

impl eframe::App for DemoApp {
    fn ui(&mut self, ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
        ui.checkbox(&mut self.dark, "Dark Mode");
        ui.ctx().set_visuals(if self.dark {egui::Visuals::dark()} else {egui::Visuals::light()});
        ui.colored_label(egui::Color32::LIGHT_BLUE, "Eigene Akzentfarbe");
    }
}

fn main() -> eframe::Result {
    eframe::run_native(
        "Rust Desktop – Lektion 18",
        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 eigene Akzentfarbe 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