当前位置：首页 > news >正文

ESP32 LVGL btn事件、label赋值、ddlist选项读取

news 2025/6/9 1:20:19

我这里ESP32 LVGL使用Gui Guider图形化工具进行代码生产

1、 btn

需要在Gui Guider中启用事件，在btn上点击右键，选择事件添加

选中custom code（自定义代码），同时在通用中选中自定义

编辑，events_init.c文件中就会自动添加事件

static void main_screen_btn_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{break;}default:break;}
}

通过界面进行代码配置，点击按钮设置label的内容

2、label

使用下面代码就可以设置label 的text为1

lv_label_set_text(guider_ui.main_screen_label_1, "1");

3、 ddlist

添加一个ddlist，增加3个选项

需要在Gui Guider中启用事件，在ddlist上点击右键，选择事件添加

依次添加index:0,设置label_1的文本为1， index:1,设置label_1的文本为2，index:2,设置label_1的文本为3后运行

默认

选择3

生成代码如下

static void main_screen_ddlist_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{uint16_t id = lv_dropdown_get_selected(guider_ui.main_screen_ddlist_1);switch(id) {case 0:{lv_obj_set_style_text_font(guider_ui.main_screen_label_1, &lv_font_montserratMedium_12, 0);lv_label_set_text(guider_ui.main_screen_label_1, "1");break;}case 1:{lv_obj_set_style_text_font(guider_ui.main_screen_label_1, &lv_font_montserratMedium_12, 0);lv_label_set_text(guider_ui.main_screen_label_1, "2");break;}case 2:{lv_obj_set_style_text_font(guider_ui.main_screen_label_1, &lv_font_montserratMedium_12, 0);lv_label_set_text(guider_ui.main_screen_label_1, "3");break;}default:break;}break;}default:break;}
}

通过界面进行代码配置

int number = 1234;
char buffer[20]; // 确保有足够的空间存储转换后的字符串
snprintf(buffer, sizeof(buffer), "%d", number);
// 现在你可以使用buffer中的字符串来显示数字
lv_label_set_text(guider_ui.main_screen_label_1, buffer);

4、roller

roller非常适合作为时间选择

// 获取选择项的索引
int selected_index = lv_roller_get_selected(roller);// 获取选择项的字符串
char selected_str[32];
lv_roller_get_selected_str(roller, selected_str, sizeof(selected_str));

放到事件里

static void roller_event_cb(lv_obj_t *roller, lv_event_t event) {if (event == LV_EVENT_VALUE_CHANGED) {char buf[32];lv_roller_get_selected_str(roller, buf, sizeof(buf));ESP_LOGI("LVGL", "选中的选项: %s", buf);}
}

通过界面进行代码配置，这里写一个全局变量int data_number=10;其他函数里也可用

生成代码包含全局变量

代码内容

int data_number=10;static void main_screen_roller_1_event_handler (lv_event_t *e)
{lv_event_code_t code = lv_event_get_code(e);switch (code) {case LV_EVENT_CLICKED:{char buffer[32];data_number = 20;lv_roller_get_selected_str(guider_ui.main_screen_roller_1, buffer, sizeof(buffer));// 现在你可以使用buffer中的字符串来显示数字lv_label_set_text(guider_ui.main_screen_label_1, buffer);break;}default:break;}
}

效果