【技术】LVGL按钮的讲解

LVGL按钮是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，可以启用它以在单击时自动进入检查状态。本文华芯微特将对LVGL按钮进行详细的讲解。

LVGL按钮讲解

1、零件和样式

这些按钮仅具有一种主要样式，称为 LV_BTN_PART_MAIN ，并且可以使用以下组中的所有属性：

背景(background)

边界(border)

边框(outline)

阴影(shadow)

数值(value)

模式(pattern)

过渡(transitions)

启用布局或适合时，它还将使用padding属性。

2、用法

获取按钮状态

为了简化按钮的使用，可以使用 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 等。

3、范例

简单的按钮

创建两个简单的按钮

上述效果的示例代码：

#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");

}

#endif

按钮样式

按钮样式

上述效果的示例代码：

#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");

}

#endif