Kapitel 11 – Flex Layout

LVGL 9 mit MicroPython
Kapitel	11
Titel	Flex Layout
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★★☆☆
Benötigte Zeit	45 Minuten
Status	in Arbeit

Kapitel 11 – Flex Layout

Lernziel

Nach diesem Kapitel kannst du

• Flex Layout aktivieren,
• Widgets automatisch anordnen,
• horizontale und vertikale Layouts erstellen,
• Abstände und Größen steuern,
• einfache UI-Strukturen bauen.

Was ist Flex?

Flex ist ein Layout-System in LVGL.

Es ordnet Widgets automatisch innerhalb eines Containers an.

Du musst keine festen Koordinaten mehr angeben.

Grundidee

Ein Container bestimmt:

• Richtung
• Abstand
• Verhalten der Kinder

Die Kinder folgen diesen Regeln automatisch.

Flex aktivieren

cont = lv.obj(scr)
cont.set_size(300, 200)

cont.set_layout(lv.LAYOUT_FLEX)

Standardverhalten

Ohne weitere Einstellungen werden Widgets horizontal angeordnet.

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

Ergebnis

Die Buttons erscheinen nebeneinander.

Richtung ändern

Die Richtung wird über Flex-Gruppen gesteuert.

Vertikal

cont.set_flex_flow(lv.FLEX_FLOW.COLUMN)

Horizontal

cont.set_flex_flow(lv.FLEX_FLOW.ROW)

Beispiel vertikal

import lvgl as lv

scr = lv.screen_active()

cont = lv.obj(scr)
cont.set_size(200, 300)
cont.center()

cont.set_flex_flow(lv.FLEX_FLOW.COLUMN)

for i in range(3):
    btn = lv.button(cont)
    label = lv.label(btn)
    label.set_text(f"Button {i+1}")

Abstand zwischen Elementen

cont.set_flex_align(lv.FLEX_ALIGN_SPACE_EVENLY, 
                    lv.FLEX_ALIGN_CENTER, 
                    lv.FLEX_ALIGN_CENTER)

Erklärung

Flex Align steuert:

• Verteilung der Elemente
• Ausrichtung
• Abstand

Wichtige Flex-Modi

• START → oben/links
• CENTER → mittig
• END → unten/rechts
• SPACE_BETWEEN → gleichmäßige Abstände
• SPACE_EVENLY → gleichmäßige Verteilung

Grow (Wachstum)

Ein Widget kann automatisch wachsen.

btn = lv.button(cont)
btn.set_flex_grow(1)

Erklärung

grow = 1 bedeutet:

Das Widget nimmt verfügbaren Platz ein.

Beispiel mit Grow

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

btn1.set_flex_grow(1)
btn2.set_flex_grow(2)
btn3.set_flex_grow(1)

Ergebnis

• btn2 wird größer als die anderen
• Platz wird proportional verteilt

Typischer Fehler

Achtung

Flex wirkt nur innerhalb eines Containers mit aktivem Layout. Widgets außerhalb eines Flex-Containers werden nicht beeinflusst.

Hinweis

Hinweis

Flex ersetzt in LVGL fast vollständig manuelle Positionierung in komplexen UIs.

Merke

Merke

Flex steuert automatische Anordnung von Widgets innerhalb eines Containers.

Zusammenfassung

• Flex ordnet Widgets automatisch an
• Richtung wird über ROW oder COLUMN gesetzt
• Abstand und Verteilung sind steuerbar
• grow erlaubt dynamische Größen
• Flex ist die Basis moderner LVGL-Layouts