📚 课程目录第3章使用LVGL对象和样式

3. 使用LVGL对象和样式

任务目标

在ESP32上使用LVGL创建标签（Label）和按钮（Button）对象，并通过LVGL样式系统为对象设置自定义外观——包括背景色、边框、圆角、文字颜色与内边距。最终在屏幕上渲染出带样式的UI元素，验证样式是否生效。

环境依赖

本案例基于ESP-IDF + LVGL v8.x，需要已配置好带显示驱动（如ILI9341）和触摸/编码器输入的LVGL移植工程。以下代码假设LVGL初始化（lv_init()）和显示驱动刷新已就绪，只需在应用层创建对象与样式。

核心实现

// app_main.c 或独立样式演示文件
#include "lvgl.h"

// 创建自定义样式函数
static void create_styles(void) {
    // 1. 创建按钮样式：蓝色背景、白色文字、圆角、边框
    static lv_style_t style_btn;
    lv_style_init(&style_btn);
    lv_style_set_bg_color(&style_btn, lv_color_hex(0x2196F3));
    lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
    lv_style_set_radius(&style_btn, 8);                 // 圆角8px
    lv_style_set_border_width(&style_btn, 2);
    lv_style_set_border_color(&style_btn, lv_color_hex(0x0D47A1));
    lv_style_set_text_color(&style_btn, lv_color_hex(0xFFFFFF));
    lv_style_set_pad_all(&style_btn, 12);               // 内边距12px

    // 2. 创建标签样式：深灰文字、浅灰背景、圆角
    static lv_style_t style_label;
    lv_style_init(&style_label);
    lv_style_set_bg_color(&style_label, lv_color_hex(0xEEEEEE));
    lv_style_set_bg_opa(&style_label, LV_OPA_COVER);
    lv_style_set_radius(&style_label, 4);
    lv_style_set_text_color(&style_label, lv_color_hex(0x212121));
    lv_style_set_border_width(&style_label, 1);
    lv_style_set_border_color(&style_label, lv_color_hex(0x9E9E9E));
    lv_style_set_pad_all(&style_label, 6);

    // 3. 创建屏幕对象并应用样式
    lv_obj_t *scr = lv_scr_act();

    // 按钮对象
    lv_obj_t *btn = lv_btn_create(scr);
    lv_obj_add_style(btn, &style_btn, 0);               // 0 = 默认状态
    lv_obj_set_pos(btn, 40, 60);
    lv_obj_set_size(btn, 120, 48);

    // 按钮上的标签（继承按钮文字样式）
    lv_obj_t *btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "点击");
    lv_obj_center(btn_label);

    // 独立标签对象
    lv_obj_t *info_label = lv_label_create(scr);
    lv_obj_add_style(info_label, &style_label, 0);
    lv_label_set_text(info_label, "LVGL 样式演示");
    lv_obj_set_pos(info_label, 40, 20);
    lv_obj_set_size(info_label, 160, 30);
}

void app_main(void) {
    // 假设 lv_init() 和显示驱动初始化已完成
    create_styles();
}

运行与验证

将上述代码放入ESP-IDF工程中，确保LVGL已初始化且lv_timer_handler()在循环中周期调用。
编译烧录：idf.py build flash monitor
通过判定标准：屏幕左上角显示带浅灰背景、圆角边框的标签文字“LVGL 样式演示”；其下方显示蓝色背景、白色文字、带深蓝边框的圆角按钮，按钮文字“点击”居中。若颜色、圆角、边框与代码设置一致，则样式系统工作正常。

关键说明

样式对象需用static修饰或全局分配，避免在函数返回后失效。
lv_obj_add_style(obj, &style, 0)中的0表示默认状态选择器；如需按压反馈可添加LV_STATE_PRESSED样式。
按钮内标签未单独添加样式，因此继承按钮的文字颜色（白色），这是LVGL样式继承机制的直接体现。