芯课堂 | 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按钮是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，可以启用它以在单击时自动进入检查状态。如您在使用中有遇到疑问，欢迎联系我们。

?