Kapitel 10 – Layout (Grundlagen)

LVGL 9 mit MicroPython
Kapitel	10
Titel	Layout (Grundlagen)
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★☆☆☆
Benötigte Zeit	35 Minuten
Status	in Arbeit

Kapitel 10 – Layout (Grundlagen)

Lernziel

Nach diesem Kapitel kannst du

• verstehen, warum Layouts notwendig sind,
• einfache Anordnungen von Widgets erstellen,
• Container verwenden,
• erste Schritte Richtung Flex Layout verstehen.

Warum Layout?

Bisher haben wir Widgets mit

• center()
• align()

positioniert.

Das funktioniert gut für einzelne Elemente.

Sobald jedoch mehrere Widgets vorhanden sind, wird es unübersichtlich:

• Buttons müssen untereinander stehen
• Menüs sollen automatisch wachsen
• Listen sollen sich anpassen

Hier kommen Layouts ins Spiel.

Was ist ein Layout?

Ein Layout steuert, wie Kinder eines Widgets angeordnet werden.

Ein Layout wirkt immer auf den Parent.

Das bedeutet:

• Der Container bestimmt die Anordnung
• Die Kinder folgen dieser Regel automatisch

Container

Ein Container ist ein normales Widget, das andere Widgets enthält.

cont = lv.obj(scr)

Beispiel Container

import lvgl as lv

scr = lv.screen_active()

cont = lv.obj(scr)
cont.set_size(200, 200)
cont.align(lv.ALIGN.CENTER, 0, 0)

Widgets im Container

btn1 = lv.button(cont)
btn2 = lv.button(cont)
btn3 = lv.button(cont)

Alle Buttons gehören zum Container.

Problem ohne Layout

Ohne Layout liegen alle Widgets übereinander.

Das Ergebnis ist nicht nutzbar.

Erste einfache Lösung

Man könnte Widgets manuell positionieren:

btn1.align(lv.ALIGN.TOP_MID, 0, 10)
btn2.align(lv.ALIGN.CENTER, 0, 0)
btn3.align(lv.ALIGN.BOTTOM_MID, 0, -10)

Das funktioniert, ist aber unflexibel.

Warum das nicht reicht

Manuelle Positionierung hat Nachteile:

• Änderungen sind aufwendig
• Skalierung auf verschiedene Displays schwierig
• Viele Berechnungen nötig

Vorbereitung auf Flex

LVGL bietet dafür ein flexibles Layout-System:

• Flex Layout
• Grid Layout

Diese werden in den nächsten Kapiteln behandelt.

Wichtig

Hinweis

Layouts wirken nur auf die direkten Child-Widgets eines Containers.

Merke

Merke

Ein Layout steuert die Anordnung der Kinder eines Containers automatisch.

Zusammenfassung

• Layouts ersetzen manuelle Positionierung
• Sie wirken auf Container
• Widgets werden automatisch angeordnet
• Flex und Grid folgen in den nächsten Kapiteln