芯课堂 | LVGL基础知识（四）
概述
LVGL按钮是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，可以启用它以在单击时自动进入检查状态。
LVGL按钮讲解
零件和样式
这些按钮仅具有一种主要样式，称为 LV_BTN_PART_MAIN ，并且可以使用以下组中的所有属性：
•背景(background)
•边界(border)
•边框(outline)
•阴影(shadow)
•数值(value)
•模式(pattern)
•过渡(transitions)
启用布局或适合时，它还将使用padding属性。
用法
获取按钮状态
为了简化按钮的使用，可以使用 lv_btn_get_state(btn) 来获取按钮的状态。它返回以下值之一：
•LV_BTN_STATE_RELEASED 松开
•LV_BTN_STATE_PRESSED 被点击
•LV_BTN_STATE_CHECKED_RELEASED 点击后松开
•LV_BTN_STATE_CHECKED_PRESSED 重复点击
•LV_BTN_STATE_DISABLED 禁用
•LV_BTN_STATE_CHECKED_DISABLED
使用 lv_btn_set_state(btn, LV_BTN_STATE_...) 可以手动更改按钮状态。
如果需要状态的更精确描述（例如，重点突出），则可以使用常规 lv_obj_get_state(btn) 。
可检查
可以使用 lv_btn_set_checkable(btn, true) 将按钮配置为切换按钮。在这种情况下，单击时，按钮将自动进入 LV_STATE_CHECKED 状态，或再次单击时返回到LV_STATE_CHECKED状态。
布局和适配
与容器类似，按钮也具有布局和适合属性。
lv_btn_set_layout(btn, LV_LAYOUT_...) 设置布局。默认值为 LV_LAYOUT_CENTER 。因此，如果添加标签，则标签将自动与中间对齐，并且无法通过 lv_obj_set_pos() 移动。您可以使用 lv_btn_set_layout(btn, LV_LAYOUT_OFF) 禁用布局。
lv_btn_set_fit/fit2/fit4(btn, LV_FIT_..) 允许根据子代，父代和适合类型自动设置按钮的宽度和/或高度。
事件
除了 通用事件 外，按钮还发送以下特殊事件：
· LV_EVENT_VALUE_CHANGED-切换按钮时发送。
了解有关 事件 的更多信息。
按键
以下按键由按钮处理：
· LV_KEY_RIGHT/UP-如果启用了切换，则进入切换状态。
· LV_KEY_LEFT/DOWN-如果启用了切换，则进入非切换状态。
请注意， LV_KEY_ENTER 的状态已转换为 LV_EVENT_PRESSED/PRESSING/RELEASED 等。
进一步了解 按键 。
范例
简单的按钮
创建两个简单的按钮
上述效果的示例代码：
#include "../../../lv_examples.h"
#include
#if LV_USE_BTN
static void event_handler(lv_obj_t * obj, lv_event_t event)
{
if(event == LV_EVENT_CLICKED) {
printf("Clicked\n");
}
else if(event == LV_EVENT_VALUE_CHANGED) {
printf("Toggled\n");
}
}
void lv_ex_btn_1(void)
{
lv_obj_t * label;
lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(btn1, event_handler);
lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -40);
label = lv_label_create(btn1, NULL);
lv_label_set_text(label, "Button");
lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(btn2, event_handler);
lv_obj_align(btn2, NULL, LV_ALIGN_CENTER, 0, 40);
lv_btn_set_checkable(btn2, true);
lv_btn_toggle(btn2);
lv_btn_set_fit2(btn2, LV_FIT_NONE, LV_FIT_TIGHT);
label = lv_label_create(btn2, NULL);
lv_label_set_text(label, "Toggled");
}
按钮样式
按钮样式
上述效果的示例代码：
#include "../../../lv_examples.h"
#include
#if LV_USE_BTN
/**
* Advanced button transition examples
*/
void lv_ex_btn_2(void)
{
static lv_anim_path_t path_overshoot;
lv_anim_path_init(&path_overshoot);
lv_anim_path_set_cb(&path_overshoot, lv_anim_path_overshoot);
static lv_anim_path_t path_ease_out;
lv_anim_path_init(&path_ease_out);
lv_anim_path_set_cb(&path_ease_out, lv_anim_path_ease_out);
static lv_anim_path_t path_ease_in_out;
lv_anim_path_init(&path_ease_in_out);
lv_anim_path_set_cb(&path_ease_in_out, lv_anim_path_ease_in_out);
/*Gum-like button*/
static lv_style_t style_gum;
lv_style_init(&style_gum);
lv_style_set_transform_width(&style_gum, LV_STATE_PRESSED, 10);
lv_style_set_transform_height(&style_gum, LV_STATE_PRESSED, -10);
lv_style_set_value_letter_space(&style_gum, LV_STATE_PRESSED, 5);
lv_style_set_transition_path(&style_gum, LV_STATE_DEFAULT, &path_overshoot);
lv_style_set_transition_path(&style_gum, LV_STATE_PRESSED, &path_ease_in_out);
lv_style_set_transition_time(&style_gum, LV_STATE_DEFAULT, 250);
lv_style_set_transition_delay(&style_gum, LV_STATE_DEFAULT, 100);
lv_style_set_transition_prop_1(&style_gum, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
lv_style_set_transition_prop_2(&style_gum, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
lv_style_set_transition_prop_3(&style_gum, LV_STATE_DEFAULT, LV_STYLE_VALUE_LETTER_SPACE);
lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -80);
lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &style_gum);
/*Instead of creating a label add a values string*/
lv_obj_set_style_local_value_str(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Gum");
/*Halo on press*/
static lv_style_t style_halo;
lv_style_init(&style_halo);
lv_style_set_transition_time(&style_halo, LV_STATE_PRESSED, 400);
lv_style_set_transition_time(&style_halo, LV_STATE_DEFAULT, 0);
lv_style_set_transition_delay(&style_halo, LV_STATE_DEFAULT, 200);
lv_style_set_outline_width(&style_halo, LV_STATE_DEFAULT, 0);
lv_style_set_outline_width(&style_halo, LV_STATE_PRESSED, 20);
lv_style_set_outline_opa(&style_halo, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_outline_opa(&style_halo, LV_STATE_FOCUSED, LV_OPA_COVER); /*Just to be sure, the theme might use it*/
lv_style_set_outline_opa(&style_halo, LV_STATE_PRESSED, LV_OPA_TRANSP);
lv_style_set_transition_prop_1(&style_halo, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_OPA);
lv_style_set_transition_prop_2(&style_halo, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_WIDTH);
lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_align(btn2, NULL, LV_ALIGN_CENTER, 0, 0);
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_halo);
lv_obj_set_style_local_value_str(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Halo");
/*Ripple on press*/
static lv_style_t style_ripple;
lv_style_init(&style_ripple);
lv_style_set_transition_time(&style_ripple, LV_STATE_PRESSED, 300);
lv_style_set_transition_time(&style_ripple, LV_STATE_DEFAULT, 0);
lv_style_set_transition_delay(&style_ripple, LV_STATE_DEFAULT, 300);
lv_style_set_bg_opa(&style_ripple, LV_STATE_DEFAULT, 0);
lv_style_set_bg_opa(&style_ripple, LV_STATE_PRESSED, LV_OPA_80);
lv_style_set_border_width(&style_ripple, LV_STATE_DEFAULT, 0);
lv_style_set_outline_width(&style_ripple, LV_STATE_DEFAULT, 0);
lv_style_set_transform_width(&style_ripple, LV_STATE_DEFAULT, -20);
lv_style_set_transform_height(&style_ripple, LV_STATE_DEFAULT, -20);
lv_style_set_transform_width(&style_ripple, LV_STATE_PRESSED, 0);
lv_style_set_transform_height(&style_ripple, LV_STATE_PRESSED, 0);
lv_style_set_transition_path(&style_ripple, LV_STATE_DEFAULT, &path_ease_out);
lv_style_set_transition_prop_1(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_BG_OPA);
lv_style_set_transition_prop_2(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
lv_style_set_transition_prop_3(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
lv_obj_t * btn3 = lv_btn_create(lv_scr_act(), NULL);
lv_obj_align(btn3, NULL, LV_ALIGN_CENTER, 0, 80);
lv_obj_add_style(btn3, LV_BTN_PART_MAIN, &style_ripple);
lv_obj_set_style_local_value_str(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Ripple");
}
LVGL按钮是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，可以启用它以在单击时自动进入检查状态。如您在使用中有遇到疑问，欢迎联系我们。