avatar

松果工作室

欢迎光临

  • 首页
  • ESP
  • LVGL
  • freeRTOS
  • 快速笔记
  • 考察日志
  • 个人收藏
  • 我的服务
Home (ESP-IDF)LVGL 自定义对象加入编码器组
文章

(ESP-IDF)LVGL 自定义对象加入编码器组

Posted 10 days ago Updated 9 days ago
By YCP
7~9 min read

手动创建 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));
}

LVGL ESP
License:  CC BY 4.0
Share

Further Reading

OLDER

(ESP-IDF)LVGL 模拟器

NEWER

(ESP-IDF)vscode配置文件

Recently Updated

  • (ESP-IDF)LVGL 模拟器
  • (ESP-IDF)LVGL 自定义对象加入编码器组
  • (ESP-IDF)vscode配置文件
  • (Elec)来复再生式晶体管单管收音机
  • (ESP-IDF)ESPNOW

Trending Tags

LVGL WCH Linux Elec ThatProject freeRTOS STM ESP Flutter Others

Contents

©2026 松果工作室. Some rights reserved.

Using the Halo theme Chirpy