Kapitel 12 – Grid Layout

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

Kapitel 12 – Grid Layout

Lernziel

Nach diesem Kapitel kannst du

• Grid Layout aktivieren,
• Zeilen und Spalten definieren,
• Widgets exakt in ein Raster einordnen,
• einfache Dashboard-Strukturen bauen.

Was ist Grid?

Grid ist ein Layout-System in LVGL.

Es teilt einen Container in

• Zeilen
• Spalten

Widgets werden in dieses Raster einsortiert.

Unterschied zu Flex

• Flex → fließende Anordnung
• Grid → feste Struktur

Grid ist vergleichbar mit einer Tabelle.

Grid aktivieren

Bevor Grid genutzt werden kann, muss ein Layout gesetzt werden.

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

Spalten definieren

Die Spalten werden als Liste angegeben:

col_dsc = [100, 100, lv.GRID_TEMPLATE_LAST]

Zeilen definieren

row_dsc = [50, 50, lv.GRID_TEMPLATE_LAST]

Layout setzen

cont.set_grid_dsc_array(col_dsc, row_dsc)
cont.set_layout(lv.LAYOUT_GRID)

Beispiel

import lvgl as lv

scr = lv.screen_active()

cont = lv.obj(scr)
cont.set_size(220, 120)
cont.center()

col_dsc = [100, 100, lv.GRID_TEMPLATE_LAST]
row_dsc = [50, 50, lv.GRID_TEMPLATE_LAST]

cont.set_grid_dsc_array(col_dsc, row_dsc)
cont.set_layout(lv.LAYOUT_GRID)

Widgets im Grid

Widgets werden gezielt in Zellen platziert.

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

Position im Grid setzen

btn1.set_grid_cell(lv.GRID_ALIGN_STRETCH, 0, 1,
                   lv.GRID_ALIGN_STRETCH, 0, 1)

Erklärung

Die Parameter bedeuten:

• horizontale Ausrichtung
• Startspalte
• Spaltenspanne
• vertikale Ausrichtung
• Startzeile
• Zeilenspanne

Beispiel: 2x2 Raster

btn1.set_grid_cell(lv.GRID_ALIGN_STRETCH, 0, 1,
                   lv.GRID_ALIGN_STRETCH, 0, 1)

btn2.set_grid_cell(lv.GRID_ALIGN_STRETCH, 1, 1,
                   lv.GRID_ALIGN_STRETCH, 0, 1)

btn3.set_grid_cell(lv.GRID_ALIGN_STRETCH, 0, 1,
                   lv.GRID_ALIGN_STRETCH, 1, 1)

btn4.set_grid_cell(lv.GRID_ALIGN_STRETCH, 1, 1,
                   lv.GRID_ALIGN_STRETCH, 1, 1)

Ergebnis

Ein gleichmäßiges 2x2 Raster mit vier Buttons.

Wann Grid verwenden?

Grid ist ideal für:

• Dashboards
• Steuerpanels
• Messanzeigen
• strukturierte Menüs

Typischer Fehler

Achtung

Widgets erscheinen nicht automatisch im Grid.

Jedes Widget muss explizit einer Zelle zugewiesen werden.

Hinweis

Hinweis

Grid ist mächtiger als Flex, aber auch komplexer.

Für einfache Layouts ist Flex oft schneller.

Merke

Merke

Grid eignet sich für feste, tabellarische Layouts.

Zusammenfassung

• Grid teilt Container in Zeilen und Spalten
• Widgets werden gezielt platziert
• Ideal für strukturierte UIs
• Flex = flexibel, Grid = exakt