lvgl控件的使用-按钮

mmuyu

   在触摸屏上按键是我们使用最多的控件之一，控件的设计和功能对用户体验至关重要。因此一个易用的按钮有助于提升用户的舒适度，接下来我们就使用lvgl创建一个按钮。

按钮作为 LVGL（LittlevGL）图形用户界面库中的重要控件，用于触发操作、触发事件或执行特定任务，lvgl的按钮可以包含文本、图标或两者的组合，用户通过触摸、点击或使用外部设备（如鼠标）与按钮进行交互。

在lvgl中，最简单的按钮需要包含创建按钮，按钮的位置，按钮所属的父对象，按钮大小

转化为代码如下：

1. lv_obj_t* btn = lv_btn_create(boot_screen);
   
2.     lv_obj_set_pos(btn, 50, 50);
   
3.     lv_obj_set_size(btn, 100, 40);

复制代码

效果如图所示：



可以看见，最简单的按钮连描述文字都没有，因此是不利于用户使用的。

为了更直观展示按钮的作用，我们可以为按钮加上文字描述，使用的代码如下：

1. lv_obj_t *label = lv_label_create(btn);
   
2. lv_label_set_text(label, "button");

复制代码

再看一下效果：


相比上一个效果，这个就直观很多了。

单纯只有按钮是不够的，为了发挥按钮的作用，我们需要使用lvgl提供的事件把按钮触发事件绑定到我们需要执行的任务上，代码如下：

首先定义按钮回调函数：

1. lv_obj_add_event(btn, event_handler, LV_EVENT_ALL, NULL);

复制代码

接下来，编写对应的函数功能：

1. static void event_handler(lv_event_t* e)
   
2. {
   
3.     lv_event_code_t code = lv_event_get_code(e);
   
4. 
   
5.     if (code == LV_EVENT_CLICKED) {
   
6.         LV_LOG_USER("Clicked");
   
7.     }
   
8. }

复制代码

我们再看一下效果：



成功触发了回调函数，这样我们就简单实现了一个按钮的功能，接下来就可以用按钮实现对应数据点上传或者事件执行了。