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

LVGL -按键介绍上

news 来源：原创 2025/5/1 9:48:32

1 按键btn介绍

在 LVGL（Light and Versatile Graphics Library）中，btn（按钮）是一种常用的基础控件，用于实现用户点击交互。它通常作为触发某些操作（如切换界面、提交表单、开启功能等）的界面元素。

1.1 特点

可点击：最基本的功能是响应点击事件。
可嵌套内容：你可以在按钮中放置 label、image、icon 等对象。
支持状态变化：如按下、高亮、禁用、被选中等。
可样式化：背景颜色、边框、透明度、圆角、阴影等均可自定义。
支持“开关”模式：可通过 LV_OBJ_FLAG_CHECKABLE 实现切换状态（选中/未选中）。

1.2 创建步骤

创建按钮一般分三步：

创建对象：用 lv_btn_create() 创建按钮对象。
放入内容：如 lv_label_create() 放入文字。
注册事件：使用 lv_obj_add_event_cb() 添加点击事件响应。

1.3 风格设定

背景颜色（bg_color）
透明度（bg_opa）
边框（border_color, border_width）
圆角（radius）
阴影（shadow_width, shadow_color）

2 常见函数介绍

2.1 基本函数

创建

lv_obj_t *btn = lv_btn_create(lv_scr_act()); // 创建一个按钮

设定大小 lv_obj_set_size()

l`v_obj_set_size(btn, 100, 50); // 设置按钮大小为 100x50`

对齐 lv_obj_align()

lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0); // 将按钮居中

为按钮（或其他对象）添加事件回调函数。 lv_obj_add_event_cb()

lv_obj_add_event_cb(btn, my_btn_event_handler, LV_EVENT_CLICKED, NULL);

2.2 风格

按钮的风格（style）是用来定义按钮外观的方式。你可以通过风格设置来控制按钮的背景、边框、圆角、字体等各个视觉元素。按钮风格的操作在 LVGL 中是非常重要的，因为它允许你自定义控件的外观和交互反馈。

风格对象（lv_style_t）
所有控件的风格都使用 lv_style_t 对象来定义，它包含了控件的所有视觉属性，例如背景颜色、边框样式、字体等。

lv_style_t 是一个结构体，包含多个视觉属性，可以通过 API 函数来设置或修改。

创建和初始化风格
在 LVGL 中，风格通常是通过 lv_style_t 对象来创建的。可以使用 lv_style_init() 初始化风格对象，接着使用不同的风格设置函数来定义具体的样式。

static lv_style_t style;
lv_style_init(&style);

设置按钮的背景风格
使用 lv_style_set_bg_color()、lv_style_set_bg_grad_color() 等函数来设置按钮背景的颜色、渐变等。

lv_style_set_bg_color(&style, LV_COLOR_RED);
lv_style_set_bg_opa(&style, LV_OPA_COVER);  // 设置背景的不透明度

设置按钮的边框
使用 lv_style_set_border_color()、lv_style_set_border_width() 等函数来设置按钮边框的颜色、宽度等。

v_style_set_border_color(&style, LV_COLOR_BLACK);
lv_style_set_border_width(&style, 2);

设置按钮的圆角
使用 lv_style_set_radius() 来设置按钮的圆角大小。

lv_style_set_radius(&style, 10);  // 设置圆角半径为 10

设置按钮的阴影
使用 lv_style_set_shadow_width()、lv_style_set_shadow_color() 等函数来设置按钮的阴影效果。

lv_style_set_shadow_width(&style, 5);  // 设置阴影宽度
lv_style_set_shadow_color(&style, LV_COLOR_GRAY);  // 设置阴影颜色为灰色

将风格应用到按钮
一旦定义了风格对象，你就可以通过 lv_btn_set_style() 来应用该风格到按钮的不同部分（例如：按钮主区域、按钮的点击区域等）。

lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);  // 创建按钮
lv_obj_add_style(btn, &style, 0);  // 为按钮的常规状态应用风格

设置不同状态下的风格
你可以为按钮的不同状态（例如：普通状态、按下状态、悬停状态等）设置不同的风格。

lv_style_t style_pressed;
lv_style_init(&style_pressed);
lv_style_set_bg_color(&style_pressed, LV_COLOR_BLUE);  // 按下时的背景色为蓝色lv_obj_add_style(btn, &style, 0);  // 常规状态的风格
lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);  // 按下状态的风格

在 LVGL v8.x 中，所有控件（包括按钮）的风格都通过 lv_obj_add_style() 来设置。你需要创建一个 lv_style_t 对象，初始化并配置它的属性（如背景颜色、边框、字体等），然后通过 lv_obj_add_style() 将风格应用到按钮或其他控件上。

3 案例

你想要在按钮被按下时，让按钮产生“下沉”或“移动”的视觉效果，这在 LVGL v8 中是可以通过修改按钮位置偏移（如 lv_style_set_translate_y()）实现的

3.1 基础操作

// 按钮事件：点击后启用或禁用闪烁
static lv_timer_t* led_timer = NULL;
static bool timer_running = false;static void btn_event_cb(lv_event_t* e)
{lv_event_code_t code = lv_event_get_code(e);if (code == LV_EVENT_CLICKED) {if (timer_running) {lv_timer_del(led_timer);  // 停止闪烁led_timer = NULL;timer_running = false;lv_led_off(led_obj);  // 关闭 LED}else {led_timer = lv_timer_create(led_timer_cb, 500, NULL);  // 500ms 闪烁周期timer_running = true;}}
}void create_led_ui(void)
{// 创建 LEDled_obj = lv_led_create(lv_scr_act());lv_obj_align(led_obj, LV_ALIGN_TOP_MID, 0, 20);lv_obj_set_size(led_obj, 40, 40);lv_led_off(led_obj);// 创建按钮lv_obj_t* btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 150, 50);lv_obj_align(btn, LV_ALIGN_CENTER, 0, 50);lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_CLICKED, NULL);// 样式定义（只针对按下状态）static lv_style_t style_pressed;lv_style_init(&style_pressed);lv_style_set_translate_y(&style_pressed, 4);  // 下移 4 像素lv_style_set_bg_color(&style_pressed, lv_palette_darken(LV_PALETTE_BLUE, 2));  // 更深色视觉反馈（可选）// 添加按下样式（只在按下状态生效）lv_obj_add_style(btn, &style_pressed, LV_STATE_PRESSED);// 按钮标签lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label, "Toggle Blink");lv_obj_center(label);
}void create_screens() {create_led_ui();  // 创建并设置按钮
}

灯闪烁

3.2 动画效果

static lv_obj_t* btn;// 动画回调：设置按钮的 Y 平移（下沉）
static void anim_cb(void* var, int32_t v)
{lv_obj_set_style_translate_y((lv_obj_t*)var, v, 0);
}// 按钮事件回调
static void btn_event_cb1(lv_event_t* e)
{lv_obj_t* btn = lv_event_get_target(e);lv_event_code_t code = lv_event_get_code(e);static lv_anim_t a;if (code == LV_EVENT_PRESSED) {// 按下时：快速下沉lv_anim_init(&a);lv_anim_set_var(&a, btn);lv_anim_set_exec_cb(&a, anim_cb);lv_anim_set_time(&a, 100);  // 速度快lv_anim_set_values(&a, 0, 6);  // 下移 6 像素lv_anim_set_path_cb(&a, lv_anim_path_ease_out);lv_anim_start(&a);}else if (code == LV_EVENT_RELEASED || code == LV_EVENT_PRESS_LOST) {// 松开时：弹跳回位lv_anim_init(&a);lv_anim_set_var(&a, btn);lv_anim_set_exec_cb(&a, anim_cb);lv_anim_set_time(&a, 200);  // 慢一点lv_anim_set_values(&a, 6, 0);  // 回到原位lv_anim_set_path_cb(&a, lv_anim_path_overshoot);  // 弹跳效果lv_anim_start(&a);}
}void create_btn_with_bounce(void)
{// 创建按钮btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 150, 50);lv_obj_align(btn, LV_ALIGN_CENTER, 0, 50);lv_obj_add_event_cb(btn, btn_event_cb1, LV_EVENT_ALL, NULL);// 标签lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label, "Bounce!");lv_obj_center(label);
}