按钮部件

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

按钮部件的组成

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

  

按钮部件的相关知识

• 按钮部件和基础对象非常类似，它们的绝大部分知识都是通用的，这里我们只介绍它们之间的区别：
  • 默认情况下，按钮部件不可滚动。
  • 默认情况下，按钮部件已经添加到默认组中。
  • 按钮部件的默认宽高为 LV_SIZE_CONTENT（自适应）。

按钮部件的 API 函数

• LVGL 官方仅提供了一个与按钮部件相关的 API，如下表所示：

  函数	描述
  lv_button_create	创建按钮对象

代码实战

• 要求如下：

• 创建速度标签、三个按钮部件：

  int32_t  with = lv_obj_get_width(lv_scr_act());
  int32_t  height = lv_obj_get_height(lv_scr_act());
  
  label_speed = lv_label_create(lv_scr_act());                                    /* 创建速度显示标签 */
  lv_obj_set_style_text_font(label_speed, &lv_font_montserrat_24, LV_PART_MAIN);  /* 设置字体 */
  lv_label_set_text(label_speed, "Speed : 0 RPM");                                /* 设置文本 */
  lv_obj_align(label_speed, LV_ALIGN_CENTER, 0, -height / 3);                     /* 设置标签位置 */
  
  btn_speed_up = lv_btn_create(lv_scr_act());                                     /* 创建加速按钮 */
  lv_obj_set_size(btn_speed_up, with / 4, height / 6);                 			  /* 设置按钮大小 */
  lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -with / 3, 0);                      /* 设置按钮位置 */
  lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL);        /* 设置按钮事件 */
  
  lv_obj_t* label_up = lv_label_create(btn_speed_up);                             /* 创建加速按钮标签 */
  lv_obj_set_style_text_font(label_up, &lv_font_montserrat_24, LV_PART_MAIN);     /* 设置字体 */
  lv_label_set_text(label_up, "Speed +");                                         /* 设置标签文本 */
  lv_obj_set_align(label_up, LV_ALIGN_CENTER);                                    /* 设置标签位置 */
  
  btn_speed_down = lv_btn_create(lv_scr_act());                                   /* 创建加速按钮 */
  lv_obj_set_size(btn_speed_down, with / 4, height / 6);                 		  /* 设置按钮大小 */
  lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0);                            /* 设置按钮位置 */
  lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL);      /* 设置按钮事件 */
  
  lv_obj_t* label_down = lv_label_create(btn_speed_down);                         /* 创建减速按钮标签 */
  lv_obj_set_style_text_font(label_down, &lv_font_montserrat_24, LV_PART_MAIN);   /* 设置字体 */
  lv_label_set_text(label_down, "Speed -");                                       /* 设置标签文本 */
  lv_obj_set_align(label_down, LV_ALIGN_CENTER);                                  /* 设置标签位置 */
  
  btn_speed_stop = lv_btn_create(lv_scr_act());                                   /* 创建停止按钮 */
  lv_obj_set_size(btn_speed_stop, with / 4, height / 6);                 	      /* 设置按钮大小 */
  lv_obj_align(btn_speed_stop, LV_ALIGN_CENTER, with / 3, 0);                     /* 设置按钮位置 */
  lv_obj_set_style_bg_color(btn_speed_stop, lv_color_hex(0xef5f60), LV_STATE_DEFAULT); /* 设置按钮背景颜色（默认）*/
  lv_obj_set_style_bg_color(btn_speed_stop, lv_color_hex(0xff0000), LV_STATE_PRESSED); /* 设置按钮背景颜色（按下）*/
  lv_obj_add_event_cb(btn_speed_stop, btn_event_cb, LV_EVENT_CLICKED, NULL);      /* 设置按钮事件 */
  
  lv_obj_t* label_stop = lv_label_create(btn_speed_stop);                         /* 创建加速按钮标签 */
  lv_obj_set_style_text_font(label_stop, &lv_font_montserrat_24, LV_PART_MAIN);   /* 设置字体 */
  lv_label_set_text(label_stop, "Stop");                                          /* 设置标签文本 */
  lv_obj_set_align(label_stop, LV_ALIGN_CENTER);                                  /* 设置标签位置 */

• 按钮按下事件回调函数实现：

  static void btn_event_cb(lv_event_t* e)
  {
      lv_obj_t* target = lv_event_get_target(e); /* 获取触发源 */
  
      static int speed_val = 0;
      if(target == btn_speed_up)
          speed_val += 30;
      if(target == btn_speed_down)
          speed_val -= 30;
      if(target == btn_speed_stop)
          speed_val = 0;
  
      lv_label_set_text_fmt(label_speed, "Speed : %d RPM", speed_val);                /* 更新速度值 */
  }

• 完整代码见：Demo_btn.c

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