Kapitel 20 – Multi-Screen UI in LVGL

LVGL 9 mit MicroPython
Kapitel	20
Titel	Multi-Screen UI
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★★★☆
Benötigte Zeit	60 Minuten
Status	in Arbeit

Kapitel 20 – Multi-Screen UI in LVGL

Lernziel

Nach diesem Kapitel kannst du

• mehrere Screens in LVGL verwenden,
• zwischen Screens wechseln,
• einfache Menüstrukturen aufbauen,
• UI sauber in Seiten organisieren.

Warum Multi-Screen?

Bisher haben wir alles auf einem Screen gebaut.

Das reicht für einfache Tests.

Echte Anwendungen brauchen jedoch:

• Startbildschirm
• Menü
• Einstellungen
• Anzeige-Seiten
• Unterseiten

Grundidee

Ein Screen ist ein eigener UI-Bereich.

LVGL kann mehrere Screens verwalten und zwischen ihnen wechseln.

Screen erstellen

import lvgl as lv

scr1 = lv.obj()
scr2 = lv.obj()

Screen aktivieren

lv.screen_load(scr1)

Damit wird scr1 sichtbar.

Erster Screen

label1 = lv.label(scr1)
label1.set_text("Startscreen")
label1.center()

Zweiter Screen

label2 = lv.label(scr2)
label2.set_text("Menü")
label2.center()

Wechsel per Button

def go_to_menu(e):
    lv.screen_load(scr2)

btn = lv.button(scr1)
btn.align(lv.ALIGN.BOTTOM_MID, 0, -20)

btn_label = lv.label(btn)
btn_label.set_text("Zum Menü")
btn_label.center()

btn.add_event_cb(go_to_menu, lv.EVENT.CLICKED, None)

Zurück-Button

def go_back(e):
    lv.screen_load(scr1)

btn_back = lv.button(scr2)
btn_back.align(lv.ALIGN.BOTTOM_MID, 0, -20)

label_back = lv.label(btn_back)
label_back.set_text("Zurück")
label_back.center()

btn_back.add_event_cb(go_back, lv.EVENT.CLICKED, None)

Erklärung

• Jeder Screen ist ein eigenes Objekt
• lv.screen_load() wechselt die Ansicht
• Widgets gehören immer zu einem Screen

Daten bleiben erhalten

Wichtig:

Screens werden nicht gelöscht.

Das bedeutet:

• Werte bleiben erhalten
• Zustände bleiben gespeichert
• Wechsel ist schnell

Typischer Aufbau

Ein typisches LVGL-System besteht aus:

• Startscreen
• Hauptmenü
• Funktionsseiten
• Einstellungsseiten

Beispiel Struktur

scr_start
scr_menu
scr_settings
scr_info

Best Practice

Hinweis

Screens sollten logisch getrennte Funktionen haben.

Nicht alles in einen Screen packen.

Typischer Fehler

Achtung

Viele erstellen Widgets immer wieder neu beim Screen-Wechsel.

Besser ist:

Screens einmal erstellen und wiederverwenden.

Erweiterung: Screen-Funktionen

Für größere Projekte empfiehlt sich:

def create_menu_screen():
    scr = lv.obj()
    ...
    return scr

Vorteil

• sauberer Code
• bessere Struktur
• einfache Erweiterung

Merke

Merke

Ein Screen ist eine vollständige UI-Seite in LVGL.

Zusammenfassung

• LVGL unterstützt mehrere Screens
• Wechsel mit lv.screen_load()
• Widgets gehören zu einem Screen
• Screens sollten einmal erstellt werden
• ideale Basis für echte Anwendungen