|  **银杏科技有限公司旗下技术文档发布平台**  ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^  版本  ^  日期  ^  作者  ^  修改内容  ^
|  V1.0  |  2020-11-22  |  yang  |  初次建立  | 

===== 实验七：lv_btn按钮 =====


按钮是简单的矩形对象。它们源自容器**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>
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>

==== 三、 事件 ====
 
使用**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中。