这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 上一修订版 两侧同时换到之后的修订记录 | ||
icore4tlvgl_7 [2020/12/03 17:24] zgf 创建 |
icore4tlvgl_7 [2020/12/05 16:21] zgf |
||
---|---|---|---|
行 6: | 行 6: | ||
| V1.0 | 2020-11-22 | yang | 初次建立 | | | V1.0 | 2020-11-22 | yang | 初次建立 | | ||
- | ===== 实验六:lv_label标签 ===== | + | ===== 实验七:lv_btn按钮 ===== |
- | {{ :icore4t:icore4t_rtt_lvgl_6_1.gif?direct |}} | + | |
+ | 按钮是简单的矩形对象。它们源自容器**Container (lv_cont)**,因此也可以提供布局**layout**和配合**fit**。此外,可以使能它在单击时自动检测状态。 | ||
+ | |||
+ | 通常使用**lv_btn_create(lv_scr_act(), NULL)**可以在当前屏幕上创建一个按钮,使用**lv_label_create(btn, NULL)**为按钮创建一个标签子对象,显示文本信息。函数**lv_obj_set_event_cb(btn, event_handler)** 为按钮绑定回调函数。 | ||
+ | |||
+ | ==== 一、状态 ==== | ||
+ | |||
+ | 为了简化按钮的使用,可以使用**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_btn_toggle(btn)** 可以切换按钮的选中状态。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_7_1.gif?direct |}} | ||
<code c> | <code c> | ||
+ | lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */ | ||
+ | lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL); /* 创建按钮 */ | ||
+ | lv_obj_set_size(btn1, 80,35); /* 设置尺寸 */ | ||
+ | lv_btn_set_checkable(btn1, true); /* 选中使能 */ | ||
+ | lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 0); /* 中心对齐 */ | ||
+ | |||
+ | lv_obj_t * label = lv_label_create(btn1, NULL); /* 为按钮创建标签 */ | ||
+ | lv_label_set_text(label, "Button"); /* 设置标签文本 */ | ||
</code> | </code> | ||
+ | ==== 三、 事件 ==== | ||
+ | |||
+ | 使用**lv_obj_set_event_cb(btn, event_handler)**可以设置按钮对象的通用事件,以下特殊事件还通过按钮发送: | ||
+ | |||
+ | * **LV_EVENT_VALUE_CHANGED** 切换按钮时发送。 | ||
+ | |||
+ | 以下键值由按钮处理: | ||
+ | |||
+ | * **LV_KEY_RIGHT / UP** 如果启用了切换,则进入切换状态。 | ||
+ | * **LV_KEY_LEFT / DOWN** 如果启用了切换,则进入非切换状态。 | ||
+ | |||
+ | 请注意,状态 **LV_KEY_ENTER** 意味着按钮已转换为 **LV_EVENT_PRESSED/PRESSING/RELEASED** 模式。关于键值的详细介绍请看Input devices(Overview)章节。 | ||
+ | |||
+ | 下面的例子使用了按键切换事件,并在回调函数中操作iCore4T板载LED。初始化时,按钮未选中,LED灭,标签内容变为“LED off”。当单击按钮变为选中选中状态时,LED灯亮,标签内容变为“LED on”。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_7_2.gif?direct |}} | ||
+ | |||
+ | <code c> | ||
+ | #include <board.h> /* 操作GPIO加载头文件 */ | ||
+ | |||
+ | #define LED0_PIN GET_PIN(A, 10) /* iCore4T LED引脚为PA10 */ | ||
+ | lv_obj_t * label; /* 先定义标签label */ | ||
+ | |||
+ | static void event_handler(lv_obj_t * obj, lv_event_t event) /* 按钮回调函数 */ | ||
+ | { | ||
+ | if(event == LV_EVENT_VALUE_CHANGED) { /* 按键状态切换的话 */ | ||
+ | if(rt_pin_read(LED0_PIN) == PIN_LOW ){ /* 切换LED状态 */ | ||
+ | rt_pin_write(LED0_PIN, PIN_HIGH); | ||
+ | lv_label_set_text(label, "LED off"); /* 更新标签内容 */ | ||
+ | }else{ | ||
+ | rt_pin_write(LED0_PIN, PIN_LOW); | ||
+ | lv_label_set_text(label, "LED on"); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | void lv_gui_run(void) | ||
+ | { | ||
+ | lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */ | ||
+ | rt_pin_mode(LED0_PIN, PIN_MODE_OUTPUT); /* 设置LED为推挽输出 */ | ||
+ | rt_pin_write(LED0_PIN, PIN_HIGH); /* LED默认关闭 */ | ||
+ | |||
+ | lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL); /* 创建按钮 */ | ||
+ | lv_obj_set_size(btn1, 80,35); /* 设置尺寸 */ | ||
+ | lv_btn_set_checkable(btn1, true); /* 选中使能 */ | ||
+ | lv_obj_set_event_cb(btn1, event_handler); /* 回调函数 */ | ||
+ | lv_obj_align(btn1, NULL, LV_ALIGN_CENTER, 0, 0); /* 居中对齐 */ | ||
+ | |||
+ | label = lv_label_create(btn1, NULL); /* 为按钮创建标签 */ | ||
+ | lv_label_set_text(label, "LED off"); /* 设置标签默认文字 */ | ||
+ | } | ||
+ | </code> | ||
+ | |||
+ | ==== 四、布局和配合 ==== | ||
+ | |||
+ | 与容器相似,按钮也具有 layout 和 fit 属性。 | ||
+ | |||
+ | * 使用**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_BTN_PART_MAIN**,可以使用以下组中的所有属性: | ||
+ | * **背景** | ||
+ | * **边境** | ||
+ | * **大纲** | ||
+ | * **阴影** | ||
+ | * **值** | ||
+ | * **模式** | ||
+ | * **过渡** | ||
+ | 启用布局或配合时,它还将使用 padding 属性。关于按钮的样式使用,我们放在下一章lv_style中。 |