第十章 按钮部件(lv_btn)

       在实际的LVGL项目工程中，按钮部件的使用频率是非常高的，它常用于控制设备的启停。在LVGL中，当按钮部件被创建出来之后，其默认是一个圆角矩形，较为遗憾的是，按钮部件并不能直接设置文本。

       本章节将分为以下几个小节：

       10.1 按钮部件的组成

       10.2 按钮部件的相关知识

       10.3 按钮部件的API函数

       10.4 按钮部件的实验

        10.1 按钮部件的组成

       按钮部件(lv_btn)仅有一个组成部分：主体背景，示意图如下：

图10.1.1 按钮部件组成部分

       关于部件样式设置的内容，请大家参考6.4.4章节。

        10.2 按钮部件的相关知识

       按钮部件和基础对象非常类似，它们的绝大部分知识都是通用的，这里我们只介绍它们之间的区别：

       ① 默认情况下，按钮部件不可滚动。

       ② 默认情况下，按钮部件已经添加到默认组中。

       ③ 按钮部件的默认宽高为LV_SIZE_CONTENT（自适应）。

        10.3 按钮部件的API函数

       lv_btn_create函数

       创建按钮对象，其函数原型如下所示：

lv_obj_t *lv_btn_create(lv_obj_t *parent);

       该函数的形参，如表10.3.1所示：

表10.3.1 lv_btn_create函数形参描述

       返回值：返回对象控制块。

        10.4 按钮部件的实验

       10.4.1 硬件设计

       1. 例程功能

       本实验主要测试按钮部件API函数的使用，实验现象：开机后，屏幕上显示三个控制按钮和速度提示标签，用户可以通过KEY0、KEY1切换当前选中的按钮，通过KEY2选中按钮（按下），从而控制速度值。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程7 btn(按钮)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。

       10.4.2 软件设计

       10.4.2.1 程序流程图

       本实验的程序流程图，如下图10.4.2.1.1所示：

图10.4.2.1.1 按钮部件实验流程

       10.4.2.2 程序解析

       关于LVGL程序主要在lv_mainstart.c文件定义，首先我们看lv_mainstart函数，该函数是LVGL的程序入口，如下源码所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
/* 创建“组” */
    g = lv_group_create();
    lv_indev_set_group(indev_keypad, g);
    
    lv_example_label();             /* 速度提示标签 */
    lv_example_btn_up();            /* 加速按钮 */
    lv_example_btn_down();          /* 减速按钮 */
    lv_example_btn_stop();          /* 急停按钮 */
}
/**************************** 第一部分 结束 ****************************/
 
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  速度值提示标签
 * @param  无
 * @return 无
 */
static void lv_example_label(void)
{
    label_speed = lv_label_create(lv_scr_act());        /* 创建速度显示标签 */
lv_obj_set_style_text_font(label_speed, &lv_font_montserrat_22, 
LV_PART_MAIN);          /* 设置字体 */
    lv_label_set_text(label_speed, "Speed : 0 RPM");    /* 设置文本 */
    lv_obj_align(label_speed, LV_ALIGN_CENTER, 0, -70); /* 设置标签位置 */
}
/**************************** 第二部分 结束 ****************************/
 
/**************************** 第三部分 开始 ****************************/
/**
 * @brief  按钮回调
 * @param  *e ：事件相关参数的集合，它包含了该事件的所有数据
 * @return 无
 */
static void btn_event_cb(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */
 
    if(target == btn_speed_up)                      /* 加速按钮 */
    {
        speed_val += 30;
    }
    else if(target == btn_speed_down)               /* 减速按钮 */
    {
        speed_val -= 30;
    }
    else if(target == btn_stop)                     /* 急停按钮 */
    {
        speed_val = 0;
}
/* 更新速度值 */
    lv_label_set_text_fmt(label_speed, "Speed : %d RPM", speed_val);    
}
 
/**
 * @brief  加速按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_up(void)
{
    btn_speed_up = lv_btn_create(lv_scr_act());             /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_up, 80, 40);                  /* 设置按钮大小 */
lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -50, 0);    /* 设置按钮位置 */
/* 设置按钮事件 */
    lv_obj_add_event_cb(btn_speed_up, event_btn_cb, LV_EVENT_CLICKED, NULL); 
 
lv_obj_t* label = lv_label_create(btn_speed_up);        /* 创建加速按钮标签 */
/* 设置字体 */
    lv_obj_set_style_text_font(label, &lv_font_montserrat_22, LV_PART_MAIN);  
    lv_label_set_text(label, "S+");                         /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
 
    lv_group_add_obj(g, btn_speed_up);                      /* 加入按键组 */
}
 
/**
 * @brief  减速按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_down(void)
{
    btn_speed_down = lv_btn_create(lv_scr_act());         /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_down, 80, 40);              /* 设置按钮大小 */
lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 50, 0); /* 设置按钮位置 */
/* 设置按钮事件 */
    lv_obj_add_event_cb(btn_speed_down, event_btn_cb, LV_EVENT_CLICKED, NULL); 
 
lv_obj_t* label = lv_label_create(btn_speed_down);    /* 创建减速按钮标签 */
/* 设置字体 */
    lv_obj_set_style_text_font(label, &lv_font_montserrat_22, LV_PART_MAIN); 
    lv_label_set_text(label, "S-");                       /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);              /* 设置标签位置 */
 
    lv_group_add_obj(g, btn_speed_down);                  /* 加入按键组 */
}
 
/**
 * @brief  急停按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_stop(void)
{
    btn_stop = lv_btn_create(lv_scr_act());         /* 创建急停按钮 */
    lv_obj_set_size(btn_stop, 180, 40);             /* 设置按钮大小 */
    lv_obj_align(btn_stop, LV_ALIGN_CENTER, 0, 60); /* 设置按钮位置 */
lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60), 
LV_STATE_DEFAULT);    /* 设置按钮背景颜色（默认） */
lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000), 
LV_STATE_PRESSED);    /* 设置按钮背景颜色（按下） */
/* 设置按钮事件 */
    lv_obj_add_event_cb(btn_stop, event_btn_cb, LV_EVENT_CLICKED, NULL);  
 
lv_obj_t* label = lv_label_create(btn_stop);    /* 创建急停按钮标签 */
/* 设置字体 */
    lv_obj_set_style_text_font(label, &lv_font_montserrat_22, LV_PART_MAIN); 
    lv_label_set_text(label, "Stop");               /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);        /* 设置标签位置 */
    
    lv_group_add_obj(g, btn_stop);                  /* 加入按键组 */
}
/**************************** 第三部分 结束 ****************************/

       上述源码可分为以下三个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了标签和按钮示例函数；

       ② 速度标签实现。我们创建速度显示标签并设置相应的文本内容。

       ③ 加减速、停止按钮函数实现。我们分别创建了加速、减速和急停按钮，并为它们设置了不同的样式，当某个按钮被按下时，会触发事件回调，在事件回调函数中，再根据触发源来更新当前速度值。

       10.4.3 下载验证

       把工程编译并下载到我们的开发板中，运行效果如图10.4.3.1所示：

图10.4.3.1 按钮部件实验