前言

lvgl是一个开源的图形库，可以用于嵌入式系统中创建美观的用户界面。lvgl提供了多种物件，如按钮、滑块、文本框等，可以让开发者快速地构建出所需的界面。本文将介绍lvgl中的物件的基本概念和操作方法。物件是lvgl中最基本的元素，它们代表了界面上的各种元件，如图标、文字、图形等。物件有自己的属性，如颜色、大小、位置、对齐方式等，可以通过函数或者风格来设置。物件也有自己的事件，如点击、拖动、释放等，可以通过回调函数来处理。

目的

本文旨在介绍lvgl中物件的基本概念和操作方法，包括如何创建、设置大小、设置位置、设置对齐方式、处理父子关系等。通过本文，读者可以了解lvgl中物件的特点和用法，并能够使用物件来构建自己的GUI。

设置大小

要设置物件的大小，可以使用 lv_obj_set_size 函数，它接受一个物件指针和两个坐标参数作为输入，分别表示物件的宽度和高度。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件

lv_obj_set_size(obj, 100, 50); //设置物件的宽度为100像素，高度为50像素

除了使用像素值来设置物件的大小外，还可以使用百分比值或者 LV_SIZE_CONTENT 常量来表示相对于父物件或者内容区域的大小。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件
lv_obj_set_size(obj, lv_pct(50), LV_SIZE_CONTENT); //设置物件的宽度为父物件的50%，高度为自适应内容

设置大小时，还需要考虑物件的填充（padding）和轮廓（outline）等属性，它们会影响物件的内容区域和外观。填充是指物件两侧与其子物件之间的空间，轮廓是指物件外围的一圈边框。要设置这些属性，可以使用 lv_obj_set_style_pad_all 和 lv_obj_set_style_outline_width 等函数。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件
lv_obj_set_size(obj, 100, 50); //设置物件的宽度为100像素，高度为50像素
lv_obj_set_style_pad_all(obj, 10, 0); //设置物件的四个方向的填充为10像素
lv_obj_set_style_outline_width(obj, 5, 0); //设置物件的轮廓宽度为5像素

设置位置

要设置物件的位置，可以使用 lv_obj_set_pos 函数，它接受一个物件指针和两个坐标参数作为输入，分别表示物件的x坐标和y坐标。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件
lv_obj_set_pos(obj, 50, 100); //设置物件的x坐标为50像素，y坐标为100像素

除了使用像素值来设置物件的位置外，还可以使用百分比值或者 LV_ALIGN_DEFAULT 等常量来表示相对于父物件或者对齐方式的位置。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件
lv_obj_set_pos(obj, lv_pct(50), LV_ALIGN_CENTER); //设置物件的x坐标为父物件宽度的50%，y坐标为居中对齐

设置位置时，还需要考虑物件的变换（transform）等属性，它们会影响物件的移动和旋转等效果。变换是指在完成布局、对齐和其他定位之后，对物件进行额外的操作，如平移、缩放和旋转等。要设置这些属性，可以使用 lv_obj_set_style_transform_x 和 lv_obj_set_style_transform_zoom 等函数。例如：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); //创建一个基础物件
lv_obj_set_pos(obj, 50, 100); //设置物件的x坐标为50像素，y坐标为100像素
lv_obj_set_style_transform_x(obj, 10, 0); //在x方向上移动物件10像素
lv_obj_set_style_transform_zoom(obj, 200, 0); //将物件放大一倍

设置对齐方式

要设置物件的对齐方式，可以使用 lv_obj_align 函数或者 lv_obj_align_to 函数。lv_obj_align 函数可以设置物件相对于其父物件的对齐方式，lv_obj_align_to 函数可以设置物件相对于另一个物件的对齐方式。这些函数都接受一个物件指针和一个对齐常量作为输入，还可以选择输入x和y方向的偏移量。例如：

lv_obj_t * obj1 = lv_obj_create(lv_scr_act()); //创建一个基础物件

lv_obj_set_size(obj1, 100, 50); //设置物件的宽度为100像素，高度为50像素

lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0); //设置物件相对于父物件居中对齐

lv_obj_t * obj2 = lv_obj_create(lv_scr_act()); //创建另一个基础物件

lv_obj_set_size(obj2, 50, 25); //设置物件的宽度为50像素，高度为25像素

lv_obj_align_to(obj2, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 10); //设置物件相对于obj1在下方居中对齐，并在y方向上偏移10像素

对齐方式有以下几种选项(图1)：

• LV_ALIGN_DEFAULT: 相当于 LV_ALIGN_TOP_LEFT ，即以左上角作为原点
• LV_ALIGN_TOP_LEFT/MID/RIGHT: 分别以左上角、中上方和右上角作为原点
• LV_ALIGN_BOTTOM_LEFT/MID/RIGHT: 分别以左下角、中下方和右下角作为原点
• LV_ALIGN_LEFT/RIGHT_MID: 分别以左中方和右中方作为原点
• LV_ALIGN_CENTER: 以中心点作为原点

如果使用 lv_obj_align_to 函数，还可以在常量前加上 LV_ALIGN_OUT_ 前缀，表示在参考物件的外部对齐。(图1)

• LV_ALIGN_OUT_TOP_LEFT/MID/RIGHT: 分别在参考物件的上方左侧、中间和右侧对齐
• LV_ALIGN_OUT_BOTTOM_LEFT/MID/RIGHT: 分别在参考物件的下方左侧、中间和右侧对齐
• LV_ALIGN_OUT_LEFT/RIGHT_MID: 分别在参考物件的左侧和右侧中间对齐

 

图 1

对象的父子关系

在lvgl中，每个物件都有一个父物件，除了根物件（screen）。父物件可以包含多个子物件，形成一个树形结构。父子关系会影响物件的位置、大小、可见性、事件传递等。

要创建一个子物件，可以在 lv_obj_create 函数中传入父物件指针作为第一个参数。例如：

lv_obj_t * parent = lv_obj_create(lv_scr_act()); //创建一个基础物件作为父物件

lv_obj_t * child = lv_obj_create(parent); //创建一个基础物件作为子物件

要获取或者修改一个物件的父物件，可以使用 lv_obj_get_parent 或者 lv_obj_set_parent 函数。例如：

lv_obj_t * parent = lv_obj_get_parent(child); //获取子物件的父物件

lv_obj_set_parent(child, lv_scr_act()); //将子物件的父物件修改为根物件

父子关系会影响物件的以下方面：

• 位置：子物件的位置是相对于父物件的，而不是相对于屏幕的。如果父物件移动了，子物件也会跟随移动。
• 大小：子物件的大小不能超过父物件的大小，否则会被裁剪。如果父物件改变了大小，子物件也会根据百分比或者自适应等规则改变大小。
• 可见性：子物件的可见性取决于父物件的可见性。如果父物件隐藏了，子物件也会隐藏。如果父物件显示了，子物件也会显示，除非子物件本身是隐藏的。
• 事件传递：子物件的事件会传递给父物件，除非子物件消费了该事件。这样可以实现事件的冒泡和捕获等机制。

结语

本文介绍了lvgl中物件的基本概念和操作方法，包括如何创建、设置大小、设置位置、设置对齐方式、处理父子关系等。通过本文，读者可以了解lvgl中物件的特点和用法，并能够使用物件来构建自己的GUI。

lvgl是一个功能强大而灵活的图形库，它还提供了许多其他的特性和组件，如布局、样式、主题、动画、字体、图像、小工具等。这些内容将在后续的文章中进行介绍。

Q&A

Q1：lvgl物件是什么？

A1：lvgl物件是LVGL（Light and Versatile Graphics Library）中用来构建用户界面的基本单元，也叫做部件（Widgets）。例如按钮，标签，图片，列表，图表或文本区域等。

Q2：lvgl物件有哪些共同的基本属性？

A2：lvgl物件都有一些共同的基本属性，例如位置，大小，父物件，拖动启用，点击启用等。您可以使用lv_obj_set_…和lv_obj_get_…函数来设置或获取这些属性。

Q3：lvgl物件如何实现父子结构？

A3：lvgl物件可以有一个父物件和多个子物件。父物件可以看作是子物件的容器。每个物件（除了屏幕）都有一个父物件，但是一个父物件可以有任意数量的子物件。如果父物件的位置改变了，子物件会跟随移动。因此，所有的位置都是相对于父物件的。如果子物件部分或全部超出了父物件的范围，那么超出的部分将不会可见。

Q4：lvgl物件如何创建和删除？

A4：lvgl物件可以在运行时动态地创建和删除。这意味着只有当前创建（存在）的物件占用RAM。这允许您根据需要创建或删除屏幕或其他部件。每种物件类型都有自己的创建函数，它需要两个参数：一个父物件和一个复制模板（可为NULL）。

例如：

lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); //在当前屏幕上创建一个按钮

lv_obj_t * label = lv_label_create(btn, NULL); //在按钮上创建一个标签

要删除一个物件，只需调用lv_obj_del函数并传递要删除的物件指针。例如：lv_obj_del(btn);//删除按钮和它的所有子物件

Q5：lvgl物件如何设置特定的属性？

A5：除了共同的基本属性外，每种物件类型还有一些特定的属性。例如，滑块有最小值和最大值，当前值等。对于这些特定的属性，每种物件类型可能有独特的API函数。

资料来源：New Bing