LVGL组件

最新推荐文章于 2024-09-11 09:30:00 发布

左手的月光

最新推荐文章于 2024-09-11 09:30:00 发布

阅读量654

点赞数 13

文章标签： lvgl 单片机

本文链接：https://blog.csdn.net/m0_73731708/article/details/135902483

版权

本文介绍了LVGL图形库的面向对象编程思想，包括如何通过基础对象创建复杂用户界面，以及如何配置对象的属性、事件处理和样式。重点讲解了基础对象、父对象与子对象的关系，以及部件的定位、样式设置和事件响应。

摘要由CSDN通过智能技术生成

一.LVGL编程思想

LVGL (Light and Versatile Graphics Library) 采用了面向对象的编程思想。LVGL 是一个开源的图形库，旨在为嵌入式系统提供高性能的图形显示和用户界面功能。

LVGL 的设计思路是基于对象的，它利用抽象的类来实例化不同的对象。LVGL 提供了一系列的类和对象，如窗口、按钮、标签、容器等，开发者可以通过实例化这些类来创建具体的图形界面组件。

通过面向对象的编程，开发者可以轻松地创建和管理图形界面的组件。每个对象都有自己的属性和方法，可以根据需要对其进行配置和操作。此外，LVGL 还提供了事件驱动的编程模型，允许开发者通过注册回调函数来响应用户输入和系统事件。

LVGL 的面向对象的编程思想使得图形界面开发更加灵活和高效。开发者可以通过实例化不同的对象，构建出各种各样的用户界面，并根据需要进行配置和定制。
![2024-01-27T11:20:38.png][1]

二.基础对象

1.创建基础对象

LVGL 中的基础对象 (v_obj) 具有非常重要的作用。它可以作为其他对象的父对象，用于创建更复杂的对象，并且也可以作为部件使用。

作为父对象，基础对象可以通过继承机制创建其他对象。例如，可以通过继承基础对象来创建按钮、标签、图像等各种不同的对象。这样做的好处是可以复用基础对象的属性和方法，并在其基础上添加或修改功能，以满足特定的需求。开发者可以根据具体情况，选择合适的基础对象进行继承，并通过重写或扩展方法来实现自定义的对象。

另外，基础对象也可以作为部件使用。部件是指一些基本的图形界面元素，如按钮、标签、进度条等。开发者可以直接使用基础对象作为部件，通过配置属性来实现不同的效果。例如，可以创建一个文本标签的基础对象，并通过设置文本内容、字体、颜色等属性，将其用作界面中的标签部件。

LVGL 中的基础对象具有灵活性和可扩展性，可以通过继承和配置来创建各种复杂的对象，也可以直接作为部件使用。这种设计使得 LVGL 在构建图形界面时更加方便和高效。

在这里插入图片描述

创建基础对象：
void my_lvgl(void)
{
lv_obj_t* obj1=lv_obj_create(lv_scr_act()); //创建基础对象
lv_obj_set_size(obj1,60,60); //设置基础对象的大小
}

在这里插入图片描述

2.父类与对象的关系

父对象中创建子对象
在这里插入图片描述

void my_lvgl(void)
{
    lv_obj_t* obj1=lv_obj_create(lv_scr_act());  //创建基础对象
    lv_obj_set_size(obj1,200,200);                 //设置基础对象的大小
    lv_obj_set_pos(obj1,50,50);        //移动
    lv_obj_t* obj2=lv_obj_create(obj1);          //创建基础对象2
}

在这里插入图片描述

三.部件的基本属性

在这里插入图片描述

1.大小

在这里插入图片描述

位置

在这里插入图片描述

3.对齐

在这里插入图片描述

void my_lvgl(void)
{
    lv_obj_t* obj1=lv_obj_create(lv_scr_act());     //创建基础对象
    lv_obj_set_size(obj1,200,200);                  //设置基础对象的大小
    lv_obj_set_align(obj1,LV_ALIGN_CENTER);         //在父对象中居中对齐

    lv_obj_t* obj2=lv_obj_create(obj1);               //创建基础对象2
    lv_obj_align(obj2,LV_ALIGN_CENTER,30,30);         //在父对象中居中对齐且偏移


    lv_obj_t* obj3=lv_obj_create(obj1);               //创建基础对象3
    lv_obj_align_to(obj3,obj1,LV_ALIGN_OUT_TOP_MID,30,30);         //obj3基于onj1对齐，且偏移
}

4.样式

在这里插入图片描述

（1）添加样式

![2024-01-27T15:09:39.png][17]

void my_lvgl(void)
{
    //普通样式表，可以重复使用
    static lv_style_t style;                                //建立样式结构体
    lv_style_init(&style);                                   //初始化
    lv_style_set_bg_color(&style,lv_color_hex(0xf4b183));    //设置属性，这里仅仅设置背景演示
    lv_obj_t* obj1=lv_obj_create(lv_scr_act());              //创建基础对象
    lv_obj_set_size(obj1,50,50);                           //设置基础对象的大小
    lv_obj_add_style(obj1,&style,LV_STATE_DEFAULT);          //向obj1添加样式，默认触发


    //本地样式，只能用一次
    lv_obj_t* obj2=lv_obj_create(lv_scr_act());              //创建基础对象
    lv_obj_set_size(obj2,50,50);                           //设置基础对象的大小
    lv_obj_set_pos(obj2,0,50);
   lv_obj_set_style_bg_color(obj2,lv_color_hex(0x87b480),LV_STATE_DEFAULT) ;         //向obj1添加样式
}

（2）样式属性
在这里插入图片描述

void my_lvgl(void)
{
    //普通样式表，可以重复使用
    static lv_style_t style;                                //建立样式结构体
    lv_style_init(&style);                                   //初始化
    lv_style_set_bg_color(&style,lv_color_hex(0xf4b183));    //设置属性，这里仅仅设置背景演示
    lv_obj_t* obj1=lv_obj_create(lv_scr_act());              //创建基础对象
    lv_obj_set_size(obj1,50,50);                           //设置基础对象的大小
    lv_obj_add_style(obj1,&style,LV_STATE_PRESSED);          //向obj1添加样式，默认触发


    //本地样式，只能用一次
    lv_obj_t* obj2=lv_obj_create(lv_scr_act());              //创建基础对象
    lv_obj_set_size(obj2,50,50);                           //设置基础对象的大小
    lv_obj_set_pos(obj2,0,50);
    lv_obj_set_style_bg_color(obj2,lv_color_hex(0x87b480),LV_STATE_PRESSED) ;         //向obj1添加样式
    lv_obj_set_style_border_color(obj2,lv_color_hex(0x58c94c),LV_STATE_DEFAULT);      //设置边框颜色
    lv_obj_set_style_border_opa(obj2,60,LV_STATE_DEFAULT);  //透明度，越小越透明
    lv_obj_set_style_border_width(obj2,5,LV_STATE_DEFAULT);     //设置边框宽度


    lv_obj_set_style_outline_color(obj2,lv_color_hex(0x0000a0),LV_STATE_DEFAULT);      //设置轮廓颜色
    lv_obj_set_style_outline_opa(obj2,60,LV_STATE_DEFAULT);
    lv_obj_set_style_outline_width(obj2,6,LV_STATE_DEFAULT);                         //设置轮廓宽度

}

（3）单独设置部件某个部分的样式

在这里插入图片描述

void my_lvgl(void)
{
    lv_obj_t* sliber =lv_slider_create(lv_scr_act());  //创建一个进度条
    lv_obj_set_align(sliber,LV_ALIGN_CENTER);          //基于父对象居中
    lv_obj_set_style_bg_color(sliber,lv_color_hex(0x49bc40),LV_STATE_DEFAULT);   //设置部件的颜色，未指名默认主体,设置一开始就触发
    lv_obj_set_style_bg_color(sliber,lv_color_hex(0x49bc40),LV_STATE_DEFAULT|LV_PART_INDICATOR);   //设置部件的颜色，指明为指示器主体,设置一开始就触发
    
}

（4）事件

在这里插入图片描述

//lv_event_t* e事件参数
static void  myEventCb(lv_event_t* e)
{
    printf("事件函数触发\n");
    return;
}

void my_lvgl(void)
{
    lv_obj_t* obj1 =lv_obj_create(lv_scr_act());
    lv_obj_align(obj1,LV_ALIGN_CENTER,0,0);
    //myEventCb自定义事件函数
    //LV_EVENT_CLICKED按下并且释放后触发
    lv_obj_add_event_cb(obj1,myEventCb,LV_EVENT_CLICKED,NULL);  //添加事件

}

在这里插入图片描述

//lv_event_t* e事件参数
static void  myEventCb(lv_event_t* e)
{
    lv_event_code_t code=lv_event_get_code(e);  //获取事件的类型
    if(code==LV_EVENT_CLICKED)
    {
        printf("点击释放事件触发");
    }else if(code==LV_EVENT_LONG_PRESSED)
    {
        printf("长按事件触发");
    }
    return;
}

void my_lvgl(void)
{
    lv_obj_t* obj1 =lv_obj_create(lv_scr_act());
    lv_obj_align(obj1,LV_ALIGN_CENTER,0,0);
    //myEventCb自定义事件函数
    //LV_EVENT_CLICKED按下并且释放后触发
    lv_obj_add_event_cb(obj1,myEventCb,LV_EVENT_CLICKED,NULL);  //添加事件


    lv_obj_t* obj2 =lv_obj_create(lv_scr_act());
    lv_obj_align(obj2,LV_ALIGN_CENTER,50,0);
    //myEventCb自定义事件函数
    //LV_EVENT_LONG_PRESSED 长按后触发
    lv_obj_add_event_cb(obj2,myEventCb,LV_EVENT_LONG_PRESSED ,NULL);  //添加事件

}

在这里插入图片描述

lv_obj_t* obj1;
lv_obj_t* obj2;
//lv_event_t* e事件参数
static void  myEventCb(lv_event_t* e)
{
    lv_obj_t* target=lv_event_get_target(e);  //获取事件源
    if(target==obj1)
    {
        printf("obj1触发\n");
    }else if(target==obj2)
    {
        printf("obj2触发\n");
    }
    return;
}

void my_lvgl(void)
{
    obj1 =lv_obj_create(lv_scr_act());
    lv_obj_align(obj1,LV_ALIGN_CENTER,0,0);
    //myEventCb自定义事件函数
    //LV_EVENT_CLICKED按下并且释放后触发
    lv_obj_add_event_cb(obj1,myEventCb,LV_EVENT_CLICKED,NULL);  //添加事件
    lv_obj_set_size(obj1,50,50);

    obj2 =lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj2,50,50);
    lv_obj_align(obj2,LV_ALIGN_CENTER,50,0);
    //myEventCb自定义事件函数
    //LV_EVENT_LONG_PRESSED 长按后触发
    lv_obj_add_event_cb(obj2,myEventCb,LV_EVENT_LONG_PRESSED ,NULL);  //添加事件

}