LVGL 05 Positionierung
| LVGL 9 mit MicroPython | |
|---|---|
| Kapitel | 6 |
| Titel | Positionierung |
| Voraussetzungen | Grundkenntnisse in MicroPython |
| Getestet mit | LVGL 9.x |
| Schwierigkeitsgrad | ★☆☆☆☆ |
| Benötigte Zeit | 25 Minuten |
| Status | in Arbeit |
Kapitel 5 – Positionierung[Bearbeiten | Quelltext bearbeiten]
Lernziel[Bearbeiten | Quelltext bearbeiten]
Nach diesem Kapitel kannst du
- Widgets positionieren,
- den Unterschied zwischen center() und align() verstehen,
- einfache Layoutfehler vermeiden.
Warum Positionierung wichtig ist[Bearbeiten | Quelltext bearbeiten]
In LVGL ist jedes Widget auf dem Bildschirm frei positionierbar.
Ohne Positionierung würden alle Elemente übereinander liegen.
Die Positionierung bestimmt, wo ein Widget auf dem Screen oder innerhalb seines Parents erscheint.
center()[Bearbeiten | Quelltext bearbeiten]
Die einfachste Form der Positionierung ist
obj.center()Beispiel[Bearbeiten | Quelltext bearbeiten]
import lvgl as lv
scr = lv.screen_active()
label = lv.label(scr)
label.set_text("Zentriert")
label.center()Erklärung[Bearbeiten | Quelltext bearbeiten]
center() platziert ein Widget exakt in der Mitte seines Parents.
Der Parent ist in diesem Fall der Screen.
align()[Bearbeiten | Quelltext bearbeiten]
Für präzisere Positionierung wird align() verwendet.
obj.align(lv.ALIGN.CENTER, 0, 0)Beispiel[Bearbeiten | Quelltext bearbeiten]
label = lv.label(scr)
label.set_text("Oben links")
label.align(lv.ALIGN.TOP_LEFT, 10, 10)Erklärung[Bearbeiten | Quelltext bearbeiten]
align() besteht aus drei Teilen:
- Bezugspunkt (z. B. TOP_LEFT)
- X-Versatz
- Y-Versatz
Wichtige Ausrichtungen[Bearbeiten | Quelltext bearbeiten]
- lv.ALIGN.CENTER
- lv.ALIGN.TOP_LEFT
- lv.ALIGN.TOP_MID
- lv.ALIGN.TOP_RIGHT
- lv.ALIGN.BOTTOM_LEFT
- lv.ALIGN.BOTTOM_MID
- lv.ALIGN.BOTTOM_RIGHT
- lv.ALIGN.LEFT_MID
- lv.ALIGN.RIGHT_MID
Parameter von align()[Bearbeiten | Quelltext bearbeiten]
widget.align(align, x_ofs, y_ofs)| Parameter | Bedeutung |
|---|---|
| align | Bezugspunkt (z. B. TOP_LEFT oder CENTER) |
| x_ofs | Verschiebung in X-Richtung (Pixel) |
| y_ofs | Verschiebung in Y-Richtung (Pixel) |
center() vs align()[Bearbeiten | Quelltext bearbeiten]
center() ist eine Abkürzung für
obj.align(lv.ALIGN.CENTER, 0, 0)center() ist einfacher, aber weniger flexibel.
align() ist die Standardmethode für alle Layouts.
Parent-Prinzip[Bearbeiten | Quelltext bearbeiten]
Alle Positionen beziehen sich immer auf den Parent.
Das bedeutet:
- Ein Label innerhalb eines Buttons wird relativ zum Button positioniert.
- Ein Label auf dem Screen wird relativ zum Screen positioniert.
Beispiel mit Button[Bearbeiten | Quelltext bearbeiten]
btn = lv.button(scr)
btn.set_size(120, 50)
btn.align(lv.ALIGN.CENTER, 0, 0)
label = lv.label(btn)
label.set_text("OK")
label.center()Erklärung[Bearbeiten | Quelltext bearbeiten]
Der Button wird auf dem Screen zentriert.
Das Label wird innerhalb des Buttons zentriert.
Typischer Fehler[Bearbeiten | Quelltext bearbeiten]
Achtung
- Viele Anfänger erwarten absolute Bildschirmkoordinaten.
- In LVGL gilt jedoch immer das Parent-Prinzip.
Zusammenfassung[Bearbeiten | Quelltext bearbeiten]
- Positionierung erfolgt relativ zum Parent
- center() ist eine Vereinfachung von align()
- align() ist die flexible Standardmethode
- Layoutfehler entstehen oft durch falsches Parent-Denken