《lvgl基础学习 —— button》

1.lv_btn

　　lv_btn是LVGL里最常用的“可点击容器控件”。本身不显示文字、图标，只负责接收点击、触摸事件 + 提供按钮外观

　　按钮上的文字、图标，都是子对象（通常是lv_label）

 

最小使用步骤：

lv_obj_t *btn = lv_btn_create(parent);
lv_obj_t *label = lv_label_create(btn);
lv_label_set_text(label, "OK");
lv_obj_center(label);

 

demo：屏幕中央一个按钮，显示“Click me”

#include "lvgl.h"

void ui_button_demo(void)
{
    /* 创建按钮 */
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 120, 50);
    lv_obj_center(btn);

    /* 按钮文字 */
    lv_obj_t *label = lv_label_create(btn);
    lv_label_set_text(label, "Click me");
    lv_obj_center(label);
}

 

按钮的灵魂：事件

　　LVGL是事件驱动模型

　　按钮点击 不等于 回调函数指针

　　而是事件 + 回调

最常用的事件：

事件                     含义
LV_EVENT_PRESSED        按下
LV_EVENT_RELEASED       松开
LV_EVENT_CLICKED        完整点击（最常用）
LV_EVENT_LONG_PRESSED   长按

 

demo:点击按钮，文字变化

#include "lvgl.h"

static lv_obj_t *label;

static void btn_event_cb(lv_event_t *e)
{
    if(lv_event_get_code(e) == LV_EVENT_CLICKED) {
        lv_label_set_text(label, "Clicked!");
    }
}

void ui_button_demo(void)
{
    lv_obj_t *btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 150, 60);
    lv_obj_center(btn);

    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);

    label = lv_label_create(btn);
    lv_label_set_text(label, "Click me");
    lv_obj_center(label);
}

 

如何区分多个按钮

方法：user_data

static void btn_event_cb(lv_event_t *e)
{
    int id = (int)lv_event_get_user_data(e);

    if(id == 1) {
        printf("Button 1 clicked\n");
    } else if(id == 2) {
        printf("Button 2 clicked\n");
    }
}

创建按钮时：

lv_obj_add_event_cb(btn1, btn_event_cb, LV_EVENT_CLICKED, (void *)1);
lv_obj_add_event_cb(btn2, btn_event_cb, LV_EVENT_CLICKED, (void *)2);

 

按钮API说明：

设置大小：

lv_obj_set_size(btn, 200, 80);

设置位置：

lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);

设置圆角：

lv_obj_set_style_radius(btn, 10, 0);

设置背景颜色：

lv_obj_set_style_bg_color(btn, lv_color_hex(0x007AFF), 0);

 

按钮状态：

状态        说明
默认        松开
Pressed    按下
Disabled   禁用

 

禁用按钮：

lv_obj_add_state(btn, LV_STATE_DISABLED);

启用按钮：

lv_obj_clear_state(btn, LV_STATE_DISABLED);

 

demo:两个按钮 + 状态变化

static lv_obj_t *label;

static void btn_event_cb(lv_event_t *e)
{
    int id = (int)lv_event_get_user_data(e);

    if(lv_event_get_code(e) == LV_EVENT_CLICKED) {
        if(id == 1)
            lv_label_set_text(label, "Button A");
        else
            lv_label_set_text(label, "Button B");
    }
}

void ui_button_demo(void)
{
    /* 显示文本 */
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "None");
    lv_obj_align(label, LV_ALIGN_TOP_MID, 0, 20);

    /* Button A */
    lv_obj_t *btn1 = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn1, 140, 60);
    lv_obj_align(btn1, LV_ALIGN_LEFT_MID, 20, 0);
    lv_obj_add_event_cb(btn1, btn_event_cb, LV_EVENT_CLICKED, (void *)1);

    lv_obj_t *label1 = lv_label_create(btn1);
    lv_label_set_text(label1, "Button A");
    lv_obj_center(label1);

    /* Button B */
    lv_obj_t *btn2 = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn2, 140, 60);
    lv_obj_align(btn2, LV_ALIGN_RIGHT_MID, -20, 0);
    lv_obj_add_event_cb(btn2, btn_event_cb, LV_EVENT_CLICKED, (void *)2);

    lv_obj_t *label2 = lv_label_create(btn2);
    lv_label_set_text(label2, "Button B");
    lv_obj_center(label2);
}

 

新手最常见的坑（一定要避）

❌ 1️⃣ 忘了给按钮加 label
→ 按钮是“空的”

❌ 2️⃣ 在回调里 while(1)
→ UI 卡死

❌ 3️⃣ 回调里做 I/O / sleep
→ UI 严重卡顿

❌ 4️⃣ 直接在回调里操作硬件
→ 正确做法：通知 service 层