LVGL 06 Styles

LVGL 9 mit MicroPython
Kapitel	7
Titel	Styles
Voraussetzungen	Grundkenntnisse in MicroPython
Getestet mit	LVGL 9.x
Schwierigkeitsgrad	★★☆☆☆
Benötigte Zeit	30 Minuten
Status	in Arbeit

Kapitel 6 – Styles

Lernziel

Nach diesem Kapitel kannst du

• Textfarben ändern,
• Hintergrundfarben setzen,
• Styles erzeugen und verwenden,
• verstehen, warum Styles wiederverwendbar sind.

Was ist ein Style?

Ein Style beschreibt das Aussehen eines Widgets.

Beispiele:

• Textfarbe
• Hintergrundfarbe
• Schriftgröße
• Rahmen
• Abstände

Styles sind in LVGL getrennt von Widgets.

Das bedeutet: Ein Widget enthält keine Farbinformationen direkt.

Stattdessen bekommt es einen oder mehrere Styles zugewiesen.

Warum Styles?

Styles haben zwei große Vorteile:

• Sie können wiederverwendet werden
• Sie sparen Speicher

Ein Style kann vielen Widgets zugewiesen werden.

Erster Style

import lvgl as lv

scr = lv.screen_active()

label = lv.label(scr)
label.set_text("Roter Text")

style = lv.style_t()
style.init()
style.set_text_color(lv.color_hex(0xFF0000))

label.add_style(style, lv.PART.MAIN)

Erklärung

Ein Style wird erzeugt mit:

style = lv.style_t()
style.init()

Dann wird eine Eigenschaft gesetzt:

style.set_text_color(...)

Anschließend wird der Style dem Widget zugewiesen:

label.add_style(style, lv.PART.MAIN)

Textfarbe

Die Textfarbe wird so gesetzt:

style.set_text_color(lv.color_hex(0x00FF00))

Hintergrundfarbe

style.set_bg_color(lv.color_hex(0x0000FF))
style.set_bg_opa(lv.OPA.COVER)

Wichtiger Hinweis

Hinweis

Ohne gesetzte Deckkraft (OPA) ist eine Hintergrundfarbe oft nicht sichtbar.

Schriftgröße

style.set_text_font(lv.font_montserrat_20)

Vorhandene Fonts

Hinweis

Welche Schriftarten verfügbar sind, hängt von der Konfiguration des LVGL-Builds ab. Vor der Verwendung einer Schriftart sollte geprüft werden, ob sie in der verwendeten Firmware enthalten ist.

Die vorhandenen Fonts kann man sich mit

import lvgl as lv
for name in dir(lv):
    if "font_" in name:
        print(name)

anzeigen lassen. Bei mir waren es:

• binfont_create
• binfont_destroy
• binfont_font_class
• builtin_font_class
• draw_buf_get_font_handlers
• font_class_t
• font_get_default
• font_glyph_dsc_gid_t
• font_glyph_dsc_t
• font_info_t
• font_montserrat_12
• font_montserrat_14
• font_montserrat_16
• font_t
• imgfont_create
• imgfont_destroy
• theme_get_font_large
• theme_get_font_normal
• theme_get_font_small

Mehrere Eigenschaften

Ein Style kann mehrere Eigenschaften enthalten:

style = lv.style_t()
style.init()

style.set_text_color(lv.color_hex(0xFFFFFF))
style.set_bg_color(lv.color_hex(0x000000))
style.set_bg_opa(lv.OPA.COVER)
style.set_text_font(lv.font_montserrat_16)

Wiederverwendung

Ein Style kann mehreren Widgets zugewiesen werden.

label1 = lv.label(scr)
label1.set_text("Text 1")
label1.add_style(style, lv.PART.MAIN)

label2 = lv.label(scr)
label2.set_text("Text 2")
label2.add_style(style, lv.PART.MAIN)

Vorteil

Wenn sich ein Style ändert, ändern sich alle Widgets automatisch.

Typischer Fehler

Achtung

Styles wirken nur, wenn sie dem richtigen PART zugewiesen werden. Für einfache Widgets ist das meist lv.PART.MAIN.

Zusammenfassung

• Styles bestimmen das Aussehen von Widgets
• Styles sind von Widgets getrennt
• Ein Style kann mehrfach verwendet werden
• Ohne OPA sind Hintergrundfarben oft unsichtbar