LVGL 04 02 Button

LVGL 9 mit MicroPython
Kapitel	5
Titel	Der Button
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★☆☆☆☆
Benötigte Zeit	20 Minuten
Status	in Arbeit

Kapitel 4.2– Der Button

Lernziel

Nach diesem Kapitel kannst du

• einen Button erzeugen,
• Text auf einem Button anzeigen,
• auf einen Button klicken,
• einfache Ereignisse (Events) verstehen.

Was ist ein Button?

Ein Button ist ein interaktives Widget.

Der Benutzer kann ihn antippen oder anklicken.

Typische Anwendungen sind

• Start / Stop
• OK / Abbrechen
• Menü-Auswahl
• Aktionen auslösen

Ein Button besteht oft aus zwei Objekten:

• dem Button selbst
• einem Label innerhalb des Buttons

Button erzeugen

Ein Botton wird wie jedes andere LVGL-Objekt erzeugt:

from cyd_st7789_28 import *

scr = lv.screen_active()

btn = lv.button(scr)
btn.center()

label = lv.label(btn)
label.set_text("OK")
label.center()

Erklärung

Ein Button wird erzeugt mit

btn = lv.button(scr)

Der Button ist ein normales Widget und gehört zum aktuellen Screen.

Mit

btn.center()

wird der Button in der Mitte des Screens platziert.

Das Label wird als Kind des Buttons erzeugt:

label = lv.label(btn)

Damit erscheint der Text direkt auf dem Button.

Probier das mal selbst aus.

Position ändern

Das obige Programm erzeugt einen Botton in der Mitte des Displays. Nun wollen wir eine Schaltfläche nicht immer in der Mitte haben und bei mehreren würden die alle auf einander liegen.

Beim Label haben wir gelernt wie man ein Widget positionieren kann. Das funktioniert beim Botton genau so.

# LVGL_04_02_Botton_02.py
# Einen Botton mit Text unten mittig erzeugen.

from cyd_st7789_28 import *

scr = lv.screen_active()

btn = lv.button(scr)
btn.align(lv.ALIGN.BOTTOM_MID,0,0)

label = lv.label(btn)
label.set_text("OK")
label.center()

Nun erscheint der Botton unten in der Mitte, wo ein OK-Botton hingehört.

Nimm Dir die Zeit und spiele etwas mit den verschiedenen Positionen aus dem Label-Kapitel herum.

Übrigens kann man auch die Position des Textes auf dem Botton ändern. Bei diesem kleinen Botton wird das nicht sichtbar. Wenn Du gelernt hast die Größe des Botton zu ändern solltest Du das mal mit einem größeren Botton ausprobieren.

Größe ändern

button.set_size(x_width, y_height)

Beschriftung

Wie ein Botton beschriftet wird haben wir oben schon gesehen:

label = lv.label(btn)
label.set_text("OK")
label.center()

label wird als Kind von btn erzeugt. Das ist der entscheidende Punkt! Alles was vorher zu Label beschrieben wurde funktioniert auch hier. Die einzige Ausnahme ist, das sich die Positionierung auf den Botton bezieht und nicht auf den Screen.

Probiere damit mal ein bischen herum.

Events

Ereignisse (Events)

Ein Button wird erst wirklich nützlich, wenn er auf Eingaben reagiert.

def on_click(e):
    print("Button gedrückt")

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

Erklärung Events

Mit

btn.add_event_cb(...)

wird eine Funktion registriert, die bei einem Ereignis aufgerufen wird.

`lv.EVENT.CLICKED` bedeutet: Der Button wurde gedrückt und wieder losgelassen.

Beispiele

• Einen Botton mit Text erzeugen.

Hinweis

Hinweis

• Events sind der wichtigste Mechanismus für Interaktionen in LVGL.
• Fast alle interaktiven Widgets arbeiten mit Events.

Merke

Merke

• Ein Button ist ein normales Widget.
• Interaktiv wird er erst durch Events.

Zusammenfassung

• Buttons sind interaktive Widgets
• Sie bestehen oft aus Button + Label
• Events steuern das Verhalten
• CLICKED ist das wichtigste Event für den Einstieg