按钮(lv_btn)¶
概述¶
按钮是简单的矩形对象。它们源自容器，因此也可以提供布局和配合。此外，可以启用它以在单击时自动进入检查状态。
零件和样式¶
这些按钮仅具有一种主要样式，称为 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_KEY_RIGHT/UP-如果启用了切换，则进入切换状态。
LV_KEY_LEFT/DOWN-如果启用了切换，则进入非切换状态。
请注意， LV_KEY_ENTER 的状态已转换为 LV_EVENT_PRESSED/PRESSING/RELEASED 等。
进一步了解 按键 。
范例¶
简单的按钮¶
创建两个简单的按钮¶
上述效果的示例代码：
1 #include "../../../lv_examples.h"
2 #include <stdio.h>
3 #if LV_USE_BTN
4
5 static void event_handler(lv_obj_t * obj, lv_event_t event)
6 {
7 if(event == LV_EVENT_CLICKED) {
8 printf("Clicked\n");
9 }
10 else if(event == LV_EVENT_VALUE_CHANGED) {
11 printf("Toggled\n");
12 }
13 }
14
15 void lv_ex_btn_1(void)
16 {
17 lv_obj_t * label;
18
19 lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
20 lv_obj_set_event_cb(btn1, event_handler);
21 lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -40);
22
23 label = lv_label_create(btn1, NULL);
24 lv_label_set_text(label, "Button");
25
26 lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
27 lv_obj_set_event_cb(btn2, event_handler);
28 lv_obj_align(btn2, NULL, LV_ALIGN_CENTER, 0, 40);
29 lv_btn_set_checkable(btn2, true);
30 lv_btn_toggle(btn2);
31 lv_btn_set_fit2(btn2, LV_FIT_NONE, LV_FIT_TIGHT);
32
33 label = lv_label_create(btn2, NULL);
34 lv_label_set_text(label, "Toggled");
35 }
36 #endif
按钮样式¶
按钮样式¶
上述效果的示例代码：
1 #include "../../../lv_examples.h"
2 #include <stdio.h>
3 #if LV_USE_BTN
4
5 /**
6 * Advanced button transition examples
7 */
8 void lv_ex_btn_2(void)
9 {
10 static lv_anim_path_t path_overshoot;
11 lv_anim_path_init(&path_overshoot);
12 lv_anim_path_set_cb(&path_overshoot, lv_anim_path_overshoot);
13
14 static lv_anim_path_t path_ease_out;
15 lv_anim_path_init(&path_ease_out);
16 lv_anim_path_set_cb(&path_ease_out, lv_anim_path_ease_out);
17
18 static lv_anim_path_t path_ease_in_out;
19 lv_anim_path_init(&path_ease_in_out);
20 lv_anim_path_set_cb(&path_ease_in_out, lv_anim_path_ease_in_out);
21
22 /*Gum-like button*/
23 static lv_style_t style_gum;
24 lv_style_init(&style_gum);
25 lv_style_set_transform_width(&style_gum, LV_STATE_PRESSED, 10);
26 lv_style_set_transform_height(&style_gum, LV_STATE_PRESSED, -10);
27 lv_style_set_value_letter_space(&style_gum, LV_STATE_PRESSED, 5);
28 lv_style_set_transition_path(&style_gum, LV_STATE_DEFAULT, &path_overshoot);
29 lv_style_set_transition_path(&style_gum, LV_STATE_PRESSED, &path_ease_in_out);
30 lv_style_set_transition_time(&style_gum, LV_STATE_DEFAULT, 250);
31 lv_style_set_transition_delay(&style_gum, LV_STATE_DEFAULT, 100);
32 lv_style_set_transition_prop_1(&style_gum, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
33 lv_style_set_transition_prop_2(&style_gum, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
34 lv_style_set_transition_prop_3(&style_gum, LV_STATE_DEFAULT, LV_STYLE_VALUE_LETTER_SPACE);
35
36 lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);
37 lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, -80);
38 lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &style_gum);
39
40 /*Instead of creating a label add a values string*/
41 lv_obj_set_style_local_value_str(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Gum");
42
43 /*Halo on press*/
44 static lv_style_t style_halo;
45 lv_style_init(&style_halo);
46 lv_style_set_transition_time(&style_halo, LV_STATE_PRESSED, 400);
47 lv_style_set_transition_time(&style_halo, LV_STATE_DEFAULT, 0);
48 lv_style_set_transition_delay(&style_halo, LV_STATE_DEFAULT, 200);
49 lv_style_set_outline_width(&style_halo, LV_STATE_DEFAULT, 0);
50 lv_style_set_outline_width(&style_halo, LV_STATE_PRESSED, 20);
51 lv_style_set_outline_opa(&style_halo, LV_STATE_DEFAULT, LV_OPA_COVER);
52 lv_style_set_outline_opa(&style_halo, LV_STATE_FOCUSED, LV_OPA_COVER); /*Just to be sure, the theme might use it*/
53 lv_style_set_outline_opa(&style_halo, LV_STATE_PRESSED, LV_OPA_TRANSP);
54 lv_style_set_transition_prop_1(&style_halo, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_OPA);
55 lv_style_set_transition_prop_2(&style_halo, LV_STATE_DEFAULT, LV_STYLE_OUTLINE_WIDTH);
56
57 lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
58 lv_obj_align(btn2, NULL, LV_ALIGN_CENTER, 0, 0);
59 lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_halo);
60 lv_obj_set_style_local_value_str(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Halo");
61
62 /*Ripple on press*/
63 static lv_style_t style_ripple;
64 lv_style_init(&style_ripple);
65 lv_style_set_transition_time(&style_ripple, LV_STATE_PRESSED, 300);
66 lv_style_set_transition_time(&style_ripple, LV_STATE_DEFAULT, 0);
67 lv_style_set_transition_delay(&style_ripple, LV_STATE_DEFAULT, 300);
68 lv_style_set_bg_opa(&style_ripple, LV_STATE_DEFAULT, 0);
69 lv_style_set_bg_opa(&style_ripple, LV_STATE_PRESSED, LV_OPA_80);
70 lv_style_set_border_width(&style_ripple, LV_STATE_DEFAULT, 0);
71 lv_style_set_outline_width(&style_ripple, LV_STATE_DEFAULT, 0);
72 lv_style_set_transform_width(&style_ripple, LV_STATE_DEFAULT, -20);
73 lv_style_set_transform_height(&style_ripple, LV_STATE_DEFAULT, -20);
74 lv_style_set_transform_width(&style_ripple, LV_STATE_PRESSED, 0);
75 lv_style_set_transform_height(&style_ripple, LV_STATE_PRESSED, 0);
76
77 lv_style_set_transition_path(&style_ripple, LV_STATE_DEFAULT, &path_ease_out);
78 lv_style_set_transition_prop_1(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_BG_OPA);
79 lv_style_set_transition_prop_2(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
80 lv_style_set_transition_prop_3(&style_ripple, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
81
82 lv_obj_t * btn3 = lv_btn_create(lv_scr_act(), NULL);
83 lv_obj_align(btn3, NULL, LV_ALIGN_CENTER, 0, 80);
84 lv_obj_add_style(btn3, LV_BTN_PART_MAIN, &style_ripple);
85 lv_obj_set_style_local_value_str(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "Ripple");
86 }
87 #endif
相关API¶
Typedefs¶
1 typedefuint8_tlv_btn_state_t
2 typedefuint8_tlv_btn_part_t
enums¶
1 /** Possible states of a button.
2 * It can be used not only by buttons but other button-like objects too*/
3 enum {
4 LV_BTN_STATE_RELEASED,
5 LV_BTN_STATE_PRESSED,
6 LV_BTN_STATE_DISABLED,
7 LV_BTN_STATE_CHECKED_RELEASED,
8 LV_BTN_STATE_CHECKED_PRESSED,
9 LV_BTN_STATE_CHECKED_DISABLED,
10 _LV_BTN_STATE_LAST, /* Number of states*/
11 };
12
13 /**Styles*/
14 enum {
15 LV_BTN_PART_MAIN = LV_OBJ_PART_MAIN,
16 _LV_BTN_PART_VIRTUAL_LAST,
17 _LV_BTN_PART_REAL_LAST = _LV_OBJ_PART_REAL_LAST,
18 };
函数¶
1 lv_obj_t * lv_btn_create(lv_obj_t * par，constlv_obj_t *copy)
2 功能：创建一个按钮对象
3 返回：
4 指向创建的按钮的指针
5 形参：
6 par：指向对象的指针，它将是新按钮的父对象
7 copy：指向按钮对象的指针，如果不为NULL，则将从其复制新对象
8
9
10 void lv_btn_set_checkable(lv_obj_t * btn，bool tgl )
11 启用切换状态。释放时，按钮将从/切换到切换状态。
12 形参：
13 btn：指向按钮对象的指针
14 tgl：true：启用切换状态，false：禁用
15
16
17 void lv_btn_set_state(lv_obj_t * btn，lv_btn_state_t state)
18 功能：设置按钮的状态
19 形参：
20 btn：指向按钮对象的指针
21 state：按钮的新状态(来自lv_btn_state_t enum)
22
23
24 void lv_btn_toggle(lv_obj_t * btn )
25 功能：切换按钮的状态(ON-> OFF，OFF-> ON)
26 形参：
27 btn：指向按钮对象的指针
28
29
30 void lv_btn_set_layout(lv_obj_t * btn，lv_layout_t layout)
31 功能：在按钮上设置布局
32 形参：
33 btn：指向按钮对象的指针
34 layout：来自“ lv_cont_layout_t”的布局
35
36
37 void lv_btn_set_fit4(lv_obj_t * BTN，lv_fit_t left，lv_fit_t right，lv_fit_t top，lv_fit_t bottom)
38 功能：分别在所有四个方向上设置适合策略。它告诉您如何自动更改按钮大小。
39 形参：
40 btn：指向按钮对象的指针
41 left：从左适合策略 lv_fit_t
42 right：合适的策略来自 lv_fit_t
43 top：最适合的策略，来自 lv_fit_t
44 bottom：自下而上的策略 lv_fit_t
45
46
47 void lv_btn_set_fit2(lv_obj_t * btn，lv_fit_t hor，lv_fit_t ver )
48 功能：分别水平和垂直设置适合策略。它告诉您如何自动更改按钮大小。
49 形参：
50 btn：指向按钮对象的指针
51 hor：来自的水平拟合策略 lv_fit_t
52 ver：垂直适合策略，来自 lv_fit_t
53
54
55 void lv_btn_set_fit(lv_obj_t * btn，lv_fit_t fit )
56 功能：一次在所有4个方向上设置拟合策略。它告诉您如何自动更改按钮的大小。
57 形参：
58 btn：指向按钮对象的指针
59 fit：符合策略 lv_fit_t
60
61
62 lv_btn_state_t lv_btn_get_state(constlv_obj_t * btn )
63 功能：获取按钮的当前状态
64 返回：
65 按钮的状态(来自lv_btn_state_t枚举)如果按钮处于禁用状态，LV_BTN_STATE_DISABLED则将其与其他按钮状态进行“或”运算。
66 形参：
67 btn：指向按钮对象的指针
68
69
70 bool lv_btn_get_checkable(constlv_obj_t * btn )
71 功能：获取按钮的切换启用属性
72 返回：
73 true：启用检查，false：停用
74 形参：
75 btn：指向按钮对象的指针
76
77
78 lv_layout_t lv_btn_get_layout(constlv_obj_t * btn )
79 功能：获取按钮的布局
80 返回：
81 来自“ lv_cont_layout_t”的布局
82 形参：
83 btn：指向按钮对象的指针
84
85
86 lv_fit_t lv_btn_get_fit_left(constlv_obj_t * btn )
87 功能：获取合适的左模式
88 返回：
89 左部元素 lv_fit_t
90 形参：
91 btn：指向按钮对象的指针
92
93
94 lv_fit_t lv_btn_get_fit_right(constlv_obj_t * btn )
95 功能：获得合适的右模式
96 返回：
97 右部元素 lv_fit_t
98 形参：
99 btn：指向按钮对象的指针
100
101
102 lv_fit_t lv_btn_get_fit_top(constlv_obj_t * btn )
103 功能：获取最适合顶部模式
104 返回：
105 顶部元素 lv_fit_t
106 形参：
107 btn：指向按钮对象的指针
108
109
110 lv_fit_t lv_btn_get_fit_bottom(constlv_obj_t * btn )
111 功能：获取最合适底部模式
112 返回：
113 底部元素 lv_fit_t
114 形参：
115 btn：指向按钮对象的指针