LVGL系列（四）概述 之 对象 LVGL核心概念

“本文大部分内容来自LVGL官方文档，手翻版，如有错误欢迎指正。”

系列文章目录

一、LVGL系列（一） 一文了解LVGL的学习路线 轻松了解LVGL的全部 

二、LVGL系列（二）之一 LVGL必读介绍  为什么要学习LVGL

       LVGL系列（二）之二 LVGL常见问题解答 整理自官方文档

二、LVGL系列（三）LVGL仿真环境的搭建（WIN下）

        2.1 VS下搭建LVGL仿真环境

        2.1 如何在仿真环境下运行自己的代码

三、LVGL系列（三） LVGL移植教程

四、LVGL系列（四）概述

        4.1 对象 LVGL核心概念

        4.2  位置、尺寸和布局

五、LVGL系列（五）部件

六、LVGL系列（六）布局

文章目录

系列文章目录

前言  

一、属性（Attributes）

1.1基础属性（Basic attributes）

1.2 特殊属性（Specific attributes）

二、工作机制（Working mechanisms）

2.1Parent-child 结构

2.2一起移动（Moving together）

 2.3仅在父对象上可见（Visibility only on the parent）

 2.4 创建或者删除对象（Create and delete objects）

三、屏幕（Screens）

3.1 创建屏幕（Create screens）

3.2 获取一个活动的屏幕（Get the active screen）

3.3 加载屏幕（Load screens）

3.4 图层（Layers）

3.5 加载屏幕动画（Load screen with animation）

3.6 处理多个显示器（Handling multiple displays）

四、零件（Parts）

五、状态（States）

给点个赞点个关注呗！！！持续更新，整理不易，点个赞呗

---

前言  

        在LVGL中，用户接口的基础构建块是对象（objects），也叫小部件（Widgets）。例如：按钮（Button）、标签（Label）、图片（Image）、列表（List）、图表（Chart）、文本区域（Text area）。

        所有的对象类型，都在本节介绍。

        可以使用 lv_obj_t 指针句柄来引用所有的对象。通过这个指针可以设置或者获取对象的属性。

一、属性（Attributes）

1.1基础属性（Basic attributes）

所有的对象都可以具有一些基础属性：

• 位置Position
• 大小Size
• 父类Parent
• 样式Styles
• 事件处理程序 Event handlers
• 等

你可以使用v_obj_set_... 和 lv_obj_get_...函数设置或者获取这些属性。例如：

/*Set basic object attributes*/
lv_obj_set_size(btn1,  100,  50);	/*Set a button's size*/
lv_obj_set_pos(btn1,  20,30);	/*Set a button's position*/

要查看所有可用函数，请访问 Base object's documentation.。

1.2 特殊属性（Specific attributes）

有些对象类型也有特殊属性。类如，一个滑块具有：

• 最小值和最大值
• 当前值

对于这些特殊属性，每一个对象类型可能都有一些独有的API函数。例如， 对一个滑块:

/*Set slider specific attributes*/
lv_slider_set_range(slider1,  0,  100);/*Set the min. and max. values*/
lv_slider_set_value(slider1,  40,  LV_ANIM_ON);/* Set the current value(position)*/

小部件的 API 在对应的文档中文档中进行了描述，但也可以阅读相应的头文件（例如：widgets/lv_slider.h)。

二、工作机制（Working mechanisms）

2.1Parent-child 结构

        一个父类可以看作是他们子类的一个容器。每一个对象都明确的有一个父类（除了屏幕对象），但是每一父类可以有很多子类。LVGL对父类的类型没有限制，但是有一些典型的父类(e.g. button)和典型的子类(e.g. label)。        

2.2一起移动（Moving together）

如果父对象的位置更改，子对象将与父对象一起移动。因此，子对象所有位置都相对于父对象的。

lv_obj_t  *  parent  =  lv_obj_create(lv_scr_act()); /*Create a parent object on the␣current screen*/
lv_obj_set_size(parent,  100,  80);/*Set the size of the␣parent*/
lv_obj_t  *  obj1  =  lv_obj_create(parent);/*Create an object on the␣previously created parent object*/
lv_obj_set_pos(obj1,  10,  10);/*Set the position of the␣new object*/

修改父类的位置：

lv_obj_set_pos(parent,  50,  50); /*Move the parent. The child will move with it.*/

 (为简单起见，在示例中未示出对象的颜色调整。)

 2.3仅在父对象上可见（Visibility only on the parent）

如果一个子对象的部分或者全部超出父对象那么它们超出的父类的部分是不可见的。

lv_obj_set_x(obj1,  -30); /*Move the child a little bit off the parent*/

 2.4 创建或者删除对象（Create and delete objects）

        在LVGL运行过程中，对象可以被动态的创建和删除。这意味着只有在创建对象（现有的）的时候才会消耗RAM。

这可以在单击按钮以打开它时创建屏幕，并在加载新屏幕时删除屏幕。

UI可以基于当前的设备环境创建。例如，可以基于当前连接的传感器创建仪表、图表、条形图、滑块。

每一个部件都有自己的创建函数，原型如下：

lv_obj_t  *  lv_<widget>_create(lv_obj_t  *  parent,  <other  paramaters  if any>);

大部分情况下，创建函数只有一个父参数，这个参数告诉部件基于哪个对象创建的。函数的返回值是一个 lv_obj_t * 类型的指针。

对于所有的对象都有一个通用的删除函数，它可以删除一个对象包括它所有的子对象。

void lv_obj_del(lv_obj_t  *  obj);

lv_obj_del 会立即删除这个对象。如果说因为一些原因你不能立即删出这个对象。你可以使用 lv_obj_del_async(obj)。 它将在下一次调用lv_timer_handler()时起作用。这非常有用，例如你想在一个子类LV_EVENT_DELETE 程序中删除一个对象的父类。

你可以使用lv_obj_clean(obj)移除一个对象的所有子对象（而不是这个对象的本身）。

三、屏幕（Screens）

3.1 创建屏幕（Create screens）

屏幕对象是一个特殊的对象，因为它没有一个父对象。对于屏幕对象我们可以这样创建：

lv_obj_t  *  scr1  =  lv_obj_create(NULL);

屏幕对象可以创建为任何对象类型。例如：一个基本的对象（例如：部件）或者一个当作墙纸的图片。

3.2 获取一个活动的屏幕（Get the active screen）

在每一个显示器上总有一个活动的屏幕显示。默认情况下，对于每一个显示器，库会创建并且加载基础对象作为屏幕显示。

可以使用lv_scr_act()函数获取当前屏幕对象。

3.3 加载屏幕（Load screens）

使用函数lv_scr_load(scr1) 加载一个新的屏幕。

3.4 图层（Layers）

LVGL具有两个自动生成的层：

• 顶层（top layer）
• 系统层（system layer）

它们与屏幕无关，但是它们将在每个屏幕上显示。顶层在所有的对象之上，系统层在顶层之上。您可以自由地将任何弹出窗口添加到顶层。但是，系统层仅限于系统级的东西。(例如鼠标光标将在lv_indev_set_cursor()中放置在此处）。

lv_layer_top()和lv_layer_sys()函数返回顶部和系统图层的指针。

阅读图层概述部分（Layer overview）以了解有关图层的更多信息。

3.5 加载屏幕动画（Load screen with animation）

使用 lv_scr_load_anim(scr,  transition_type,  time, delay,  auto_del)也可以使新的屏幕加载动画。

存在以下转换类型：

• LV_SCR_LOAD_ANIM_NONE: 延迟毫秒后立即切换
• LV_SCR_LOAD_ANIM_OVER_LEFT/RIGHT/TOP/BOTTOM 将新屏幕移动朝给定方向覆盖当前的屏幕。
• LV_SCR_LOAD_ANIM_MOVE_LEFT/RIGHT/TOP/BOTTOM 将新屏幕和当前的屏幕一起朝给定方向移动。
• LV_SCR_LOAD_ANIM_FADE_ON 使新屏幕在就屏幕上淡出。

在上述函数中设置auto_del为ture 可以在动画结束时自动的删除上一个屏幕（老的屏幕）。

当动画在延时时间结束开始时，新的屏幕对象将会变成动态的。

3.6 处理多个显示器（Handling multiple displays）

屏幕会在当前默认选择的显示器上创建。默认显示器是使用lv_disp_drv_register 最后一次注册的显示器或者你可以的使用lv_disp_set_default(disp)明确选择一个新的默认显示器。

lv_scr_act(), lv_scr_load() and lv_scr_load_anim() 在默认屏幕上运行。

访问多显示支持（Multi-display support）以了解更多信息

四、零件（Parts）

部件由多个零件组成。例如：基础对象使用主零件和滑动条零件组成但是滑块使用滑块使用主零件、指示灯和旋钮零件。零件类似于CSS中的伪元素。

在LVGL中存在以下预定义零件：

• LV_PART_MAIN 类似背景的长方形``
• LV_PART_SCROLLBAR 滚动条
• LV_PART_INDICATOR 指示器，例如：用于卡片，栏，开关或复选框的勾选框。
• LV_PART_KNOB 类似于一个手柄可以拖动调整值。
• LV_PART_SELECTED 指示当前所选的选项或部分
• LV_PART_ITEMS 在部件有很多相似元素（例如：tabel cells）时使用。
• LV_PART_TICKS Ticks on scales e.g.  for a chart or meter
• LV_PART_CURSOR 标记一个特定的位置。例如：文本区域或图表的光标
• LV_PART_CUSTOM_FIRST 可以从此添加自定义零件.

零件的主要目的是让窗口小部件的“组件”进行样式化。因此，在样式概述部分（Style overview）中更详细地描述了这些部件。

五、状态（States）

对象可以在下列状态组合中：

• LV_STATE_DEFAULT 正常, 释放状态默认状态
• LV_STATE_CHECKED 切换或者选中状态Toggled or checked state
• LV_STATE_FOCUSED 被按键或者编码器聚焦/被触摸屏或鼠标点击
• LV_STATE_FOCUS_KEY 被按键或者编码器聚焦但不是被触摸屏或鼠标点击
• LV_STATE_EDITED 被编码器编辑
• LV_STATE_HOVERED 鼠标悬停（暂不支持）
• LV_STATE_PRESSED 被按住
• LV_STATE_SCROLLED 正在滚动
• LV_STATE_DISABLED 失效状态
• LV_STATE_USER_1 自定义状态Custom state
• LV_STATE_USER_2 自定义状态Custom state
• LV_STATE_USER_3 自定义状态Custom state
• LV_STATE_USER_4 自定义状态Custom state

通常情况下，当用户按下、释放、选中对象时，库会自动的改变对象的状态。然而，这些状态也可以手动的更改。使用lv_obj_add/clear_state(obj,  LV_STATE_...)函数可以设置或者清除已存在的状态 (但是不要触碰其他状态)。 在这两种情况下，也可以使用ORed状态值。例如：lv_obj_add_state(obj,  part,  LV_STATE_PRESSED  |  LV_PRESSED_CHECKED).

要了解有关各种状态，请阅读风格概述（Style overview）的相关部分。

给点个赞点个关注呗！！！持续更新，整理不易，点个赞呗

整个系列还在整理中，有些地方还没完成。如有意见建议，欢迎在评论区提出。