📚 课程目录第4章 LVGL基础对象操作

4. LVGL基础对象操作

任务目标

在ESP32与LVGL环境中，创建标签（Label）和按钮（Button）基础对象，设置其位置、大小与样式，并为按钮绑定点击事件回调，实现点击按钮时动态更新标签文本的功能。

环境依赖

本案例基于LVGL v8.x版本，需确保ESP32工程已正确移植LVGL并完成显示驱动与输入驱动初始化。以下代码假设LVGL已初始化成功，且存在可用的lv_disp_drv_t和lv_indev_drv_t实例。

核心实现

#include "lvgl.h"

// 按钮事件回调函数
static void btn_event_cb(lv_event_t *e) {
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_CLICKED) {
        // 获取事件源按钮对象
        lv_obj_t *btn = lv_event_get_target(e);
        // 获取按钮上关联的用户数据（此处存放标签指针）
        lv_obj_t *label = (lv_obj_t *)lv_obj_get_user_data(btn);
        // 更新标签文本
        lv_label_set_text(label, "Button Clicked!");
    }
}

void lvgl_basic_objects_demo(void) {
    // 1. 创建屏幕对象（默认活动屏幕）
    lv_obj_t *scr = lv_scr_act();

    // 2. 创建标签对象
    lv_obj_t *label = lv_label_create(scr);
    lv_label_set_text(label, "Hello LVGL");
    lv_obj_set_pos(label, 20, 30);      // 设置位置 (x=20, y=30)
    lv_obj_set_size(label, 120, 30);    // 设置大小（标签自动调整，此处为示例）
    lv_obj_set_style_text_color(label, lv_color_hex(0x2196F3), 0);  // 蓝色文字
    lv_obj_set_style_text_font(label, &lv_font_montserrat_16, 0);   // 16号字体

    // 3. 创建按钮对象
    lv_obj_t *btn = lv_btn_create(scr);
    lv_obj_set_pos(btn, 20, 80);        // 设置位置 (x=20, y=80)
    lv_obj_set_size(btn, 120, 50);      // 设置大小 (宽=120, 高=50)
    lv_obj_set_style_bg_color(btn, lv_color_hex(0x4CAF50), 0);      // 绿色背景
    lv_obj_set_style_radius(btn, 8, 0); // 圆角半径 8px

    // 4. 在按钮上创建标签（显示按钮文字）
    lv_obj_t *btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "Click Me");
    lv_obj_center(btn_label);           // 标签在按钮内居中

    // 5. 将标签指针存入按钮的用户数据，供回调函数使用
    lv_obj_set_user_data(btn, label);

    // 6. 为按钮添加点击事件回调
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);
}

运行与验证

调用方式：在LVGL初始化完成后，调用lvgl_basic_objects_demo()函数即可在屏幕上创建界面。

验证步骤：

编译并烧录固件至ESP32开发板，屏幕应显示蓝色文本“Hello LVGL”位于左上角(20,30)处。
其下方(20,80)处显示绿色圆角按钮，按钮中央有“Click Me”文字。
通过触摸屏或编码器（取决于输入设备配置）点击按钮，观察标签文本是否由“Hello LVGL”变为“Button Clicked!”。

通过条件：标签文本在按钮点击后成功更新，且按钮位置、大小、颜色与代码设置一致，即判定案例通过。

关键说明

LVGL中lv_obj_set_style_*系列函数的最后一个参数为选择器（0表示默认状态），本案例仅设置默认状态样式。
标签对象的大小通常由内容自动撑开，手动设置lv_obj_set_size仅作演示，实际布局中可省略。
事件回调中通过lv_obj_get_user_data获取关联数据，这是LVGL中传递参数的常用方式，也可使用lv_event_get_user_data获取回调注册时传入的user_data参数。
若需支持中文显示，需在工程中启用中文字体（如lv_font_simsun_16_cjk），本案例使用内置英文字体。