(ESP-IDF)LVGL 自定义对象加入编码器组
手动创建 3 个按钮,并且手动加入编码器组
#include <esp_log.h>
#include "lvgl.h"
#include "lvdev_knob.h"
#include "lv_config_init.h"
static const char *TAG = "lvpage_test";
/*==================== 样式定义(只初始化一次) ====================*/
static lv_style_t style_btn;
static lv_style_t style_btn_focus;
static lv_style_t style_icon;
static void styles_init(void)
{
static bool inited = false;
if(inited) return;
inited = true;
/* 普通按钮样式 */
lv_style_init(&style_btn);
lv_style_set_size(&style_btn, 60, 60);
lv_style_set_radius(&style_btn, LV_RADIUS_CIRCLE);
lv_style_set_bg_color(&style_btn, lv_color_hex(0xC0C0C0));
lv_style_set_border_width(&style_btn, 0);
/* 焦点高亮样式(旋钮切换时显示) */
lv_style_init(&style_btn_focus);
lv_style_set_outline_width(&style_btn_focus, 4);
lv_style_set_outline_color(&style_btn_focus, lv_palette_main(LV_PALETTE_BLUE));
/* 图标样式 */
lv_style_init(&style_icon);
lv_style_set_text_font(&style_icon, &lv_font_montserrat_26);
lv_style_set_text_color(&style_icon, lv_color_hex(0xE85866));
}
/*==================== 按钮ID ====================*/
typedef enum {
BTN_1,
BTN_2,
BTN_3
} btn_id_t;
/*==================== 事件回调 ====================*/
static void btn_event_cb(lv_event_t *e)
{
if(lv_event_get_code(e) != LV_EVENT_CLICKED) return;
btn_id_t id = (btn_id_t)lv_event_get_user_data(e);
switch(id) {
case BTN_1: ESP_LOGI(TAG, "Button 1 clicked"); break;
case BTN_2: ESP_LOGI(TAG, "Button 2 clicked"); break;
case BTN_3: ESP_LOGI(TAG, "Button 3 clicked"); break;
}
}
/*==================== 创建可聚焦菜单按钮 ====================*/
static lv_obj_t* create_menu_btn(lv_obj_t *parent, lv_group_t *group, btn_id_t id)
{
lv_obj_t *btn = lv_obj_create(parent);
/* 关键属性:必须可聚焦 */
lv_obj_add_flag(btn, LV_OBJ_FLAG_CLICK_FOCUSABLE);
lv_obj_clear_flag(btn, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_add_style(btn, &style_btn, LV_PART_MAIN);
lv_obj_add_style(btn, &style_btn_focus, LV_STATE_FOCUSED);
lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, (void*)id);
/* 图标 */
lv_obj_t *label = lv_label_create(btn);
lv_label_set_text(label, LV_SYMBOL_SETTINGS);
lv_obj_add_style(label, &style_icon, 0);
lv_obj_center(label);
if(group) lv_group_add_obj(group, btn);
return btn;
}
/*==================== 页面初始化 ====================*/
void lvpage_test_init(void)
{
styles_init();
/* 页面 */
lv_obj_t *page = lv_obj_create(lv_scr_act());
lv_obj_set_size(page, LV_HOR_RES, LV_VER_RES);
lv_obj_set_flex_flow(page, LV_FLEX_FLOW_ROW);
lv_obj_set_flex_align(page,
LV_FLEX_ALIGN_CENTER,
LV_FLEX_ALIGN_CENTER,
LV_FLEX_ALIGN_CENTER);
/* 组(用于编码器导航) */
lv_group_t *group = lv_group_create();
lv_group_set_wrap(group, true);
lv_group_set_default(group); // 非常重要
/* 绑定编码器输入设备 */
lv_indev_set_group(encoder_indev, group); // encoder_indev 来自你的 lvdev_knob
/* 创建3个按钮 */
create_menu_btn(page, group, BTN_1);
create_menu_btn(page, group, BTN_2);
create_menu_btn(page, group, BTN_3);
/* 设置初始焦点 */
lv_group_focus_obj(lv_group_get_focused(group));
}
License:
CC BY 4.0