LVGL学习之创建一个Button

---

前言

LVGL全称Light and Versatile Graphics Library,是一个自由的，开源的GUI库，界面精美，资源消耗小，可移植度高,响应式布局等特点,全库采用纯 c 语言开发，可移植性高。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建一个Button

1.引入库（LVGL V8）

首先在使用lvgl之前，你可以有多种方式，直接在电脑端下载模拟器进行运行，第二种，移植到开发板，在开发板上运行；移植的教程也是非常的多，我这里就不重复造轮子了，直接贴各位大神已经做好的：
Arduino环境下玩转 LVGL-搭建环境
codeblocks运行lvgl8

2.Arduino下使用LVGL创建一个Button

Arduino是一款便捷灵活、方便上手的开源电子原型平台，这个平台目前支持非常多的芯片，我这里是使用的乐鑫的ESP32-WROOM，LVGL版本是V8，因此如果版本不一样的同学，会存在编译不通过的问题；
首先需要移植LVGL库至我们的Arduino环境，很方便，链接放这：LVGL移植进板卡
在移植完之后，我们可以搜索LVGL V8的API函数，来写我们的界面了，这里建议先从按键开始，逐次递进；

按键（copy的@Bob_1993他的）

static void btn_event_callback(lv_event_t* event)
{
    static uint32_t counter = 1;
 
    lv_obj_t* btn = lv_event_get_target(event); //获取事件对象
    if (btn != NULL)
    {
        lv_obj_t* label = lv_obj_get_child(btn, 0); // 获取第一个子对象
        if (label != NULL)
        {
            lv_label_set_text_fmt(label, "%d", counter); //设置显示内容
            counter++;
        }
    }
}
 
 
void lv_button_click_event_test()
{
    lv_obj_t* btn = lv_btn_create(lv_scr_act()); // 创建Button对象
    if (btn != NULL)
    {
        lv_obj_set_size(btn, 100, 50); // 设置对象大小,宽度和高度
        lv_obj_set_pos(btn, 110, 150);; // 设置按钮位置，即X和Y坐标
        lv_obj_add_event_cb(btn, btn_event_callback, LV_EVENT_CLICKED, NULL); // 给对象添加CLICK事件和事件处理回调函数
 
        lv_obj_t* label = lv_label_create(btn); // 基于Button对象创建Label对象
        if (label != NULL)
        {
            lv_label_set_text(label, "Click me!"); // 设置显示内容
            lv_obj_center(label); // 对象居中显示
        }
    }
}

滑块（copy的@Bob_1993他的）

static void slider_event_callback(lv_event_t* event)
{
    lv_obj_t * slider = lv_event_get_target(event);
    if (slider != NULL)
    {
        lv_obj_t* label = (lv_obj_t* )lv_event_get_user_data(event);
        if (label != NULL)
        {
            // 刷新label对象的文本
            lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
            lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15);  // 设置对齐，label对象在slider对象上方中间位置
        }
    }
}
 
 
void lv_slider_test()
{
    lv_obj_t * slider = lv_slider_create(lv_scr_act()); // 创建滑块对象
    if (slider != NULL)
    {
        lv_obj_set_width(slider, 200); // 设置slider的宽度
        lv_obj_center(slider);  // 对样显示在屏幕中央
        lv_slider_set_range(slider, 10, 200); // 设置滑块值的变化范围10-200
 
        lv_obj_t* label = lv_label_create(lv_scr_act()); // 创建一个标签，用于显示滑块的滑动值
        if (label != NULL)
        {
            lv_label_set_text_fmt(label, "%d", lv_slider_get_min_value(slider)); // 标签默认显示滑块的最小值
            lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15);  // 标签对象放在slider对象的上方中间位置
 
            // 添加滑块值变化事件和事件回调函数，并将label对象最为事件的user_data
            lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, (void *)label);
        }
    }
}

在写好这个界面之后勒，直接放入函数的steup也就是初始化中，像这样：

void setup()
{
   lv_init();
   tft.begin();          /* TFT init */
   tft.setRotation( 1 ); /* Landscape orientation, flipped */

   /*Set the touchscreen calibration data,
     the actual data for your display can be aquired using
     the Generic -> Touch_calibrate example from the TFT_eSPI library*/
  uint16_t calData[5] = { 442, 3414, 336, 3425, 3 };
  tft.setTouch(calData);

   lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );

   /*Initialize the display*/
   static lv_disp_drv_t disp_drv;
   lv_disp_drv_init( &disp_drv );
   /*Change the following line to your display resolution*/
   disp_drv.hor_res = screenWidth;
   disp_drv.ver_res = screenHeight;
   disp_drv.flush_cb = my_disp_flush;
   disp_drv.draw_buf = &draw_buf;
   lv_disp_drv_register( &disp_drv );

   /*Initialize the (dummy) input device driver*/
   static lv_indev_drv_t indev_drv;
   lv_indev_drv_init( &indev_drv );
   indev_drv.type = LV_INDEV_TYPE_POINTER;
   indev_drv.read_cb = my_touchpad_read;
   lv_indev_drv_register( &indev_drv );
   lv_button_click_event_test();//按键
   lv_slider_test();		    //滑块
}

直接放在初始化里，上电执行一次就好，LOOP结构如下：

void loop()
{
   lv_timer_handler(); /* let the GUI do its work */
   lv_tick_inc(5);
   delay(5);
}

就很神奇。

效果

然后编译上传，LVGL上层控件这些都是一样的，前提是版本一致，不一样的是每一个板子的TFT驱动，因为接线不一致嘛！

总结

有了LVGL的支持，我们可以在一些小设备上实现非常丰富的图形界面效果，即方便，又精美，真的是感谢大神们了。致敬开源精神。今日份水文到此结束！！！

参考

安利这个博主：@Bob_1993，他也在学LVGL V8，代码都是可以直接使用的，走在我们前面了属于是；
板卡链接：（闲鱼）ESP32 LVGL学习板卡