沈阳专门代做网站的,简易app制作,网站开发成本预算价目表,飞扬世纪网站建设文章目录 前言一、LVGL9的下载二、基础对象lv_obj2.1 概述2.2 布局2.3 lv_obj的使用创建一个lv_obj设置大小设置位置设置对齐父对象与子对象事件 总结 前言
LVGL#xff08;LittlevGL#xff09;是一个开源的嵌入式图形库#xff0c;用于在嵌入式系统中创建用户界面。LVGL提… 文章目录 前言一、LVGL9的下载二、基础对象lv_obj2.1 概述2.2 布局2.3 lv_obj的使用创建一个lv_obj设置大小设置位置设置对齐父对象与子对象事件 总结 前言
LVGLLittlevGL是一个开源的嵌入式图形库用于在嵌入式系统中创建用户界面。LVGL提供了一系列丰富而灵活的功能使得开发者能够轻松创建漂亮、交互性强的用户界面。其中lv_obj是LVGL中的基础对象为整个图形库的构建提供了坚实的基础。
本文将深入探讨LVGL的基础对象lv_obj解释其在嵌入式界面开发中的关键作用。我们将介绍lv_obj的基本概念、用法和一些常见的应用场景以帮助开发者更好地理解和利用LVGL进行嵌入式图形界面开发。 一、LVGL9的下载
这里我们使用百问网提供的CodeBlocks提供给我们的lvgl模拟器 百问网团队已经将LVGL windows模拟器CodeBlocks已更新到V9.0.0版本支持更多特性 视频效果 视频效果 项目获取地址 获取地址
对于LVGL9的文档文档地址里面为英文文档
二、基础对象lv_obj
2.1 概述
基础要素定义基础对象’的属性
坐标 定义屏幕上的位置这些坐标决定了小部件的显示位置。 父对象 建立了一个层次结构父对象表示对象树中的直接上级。 子对象 采用嵌套结构基础对象’可以包含其他对象作为其子对象形成有序的组织结构。 样式 在美学领域发挥着关键作用基础对象’包含了这些样式允许开发人员定制小部件的外观。 属性如 Clickable、Scrollable 等。 面向对象范式中的继承
在面向对象编程的精神中“基础对象”扮演了基类的角色。LVGL中的所有其他对象都继承自这个基础类从而实现了一种系统化和一致的对象设计方法。 灵活多变的功能超越基础功能
“基础对象”的力量不仅仅限于其基本属性。其函数和功能不仅仅局限于自身它们可以与其他小部件一起使用。一个具体的例子是使用lv_obj_set_width(slider, 100)展示了“基础对象”的方法的多功能性。 独立简洁基础对象作为小部件
有趣的是“基础对象”不仅仅是幕后的设计师还可以独立成为一个小部件。在其最简单的形式中它表现为一个矩形。类比HTML将其想象成一个div——在Web开发中的基本容器。 总体而言“基础对象”是LVGL的关键组成部分指挥着屏幕上小部件的交响曲。它提供了一个统一的基础确保设计界面的一致性、多功能性并能够创建复杂的图形界面。无论是作为继承的基石还是作为小部件的焦点基础对象都体现了LVGL设计哲学中简单和强大的本质。
2.2 布局
Similarly to many other parts of LVGL, the concept of setting the coordinates was inspired by CSS.
LVGL has by no means a complete implementation of CSS but a comparable subset is implemented (sometimes with minor adjustments).在官网可以看到这些这表示:与LVGL的许多其他部分类似设置坐标的概念受到了CSS的启发。LVGL并没有完全实现CSS但实现了一个可比较的子集有时进行了轻微的调整。这意味着LVGL借鉴了CSS的思想来设置对象的坐标但并非完全按照CSS的规范实现而是实现了一个相似的子集有时进行了一些小的调整。
明确定义的坐标信息被存储在样式中包括大小、位置、布局等。 支持设置最小宽度、最大宽度、最小高度和最大高度。 支持像素、百分比和“content”单位。 对于上面这个单位 像素pixel简单地说就是以像素为单位的位置。整数始终表示像素。例如lv_obj_set_x(btn, 10) 表示将按钮的横坐标设置为10个像素。 百分比percentage表示对象大小相对于其父对象或父容器的百分比取决于具体属性。lv_pct(value) 将一个值转换为百分比。例如lv_obj_set_width(btn, lv_pct(50)) 表示将按钮的宽度设置为父容器宽度的50%。 LV_SIZE_CONTENT这是一个特殊的值用于将对象的宽度/高度设置为包含所有子元素的尺寸。类似于CSS中的概念。例如lv_obj_set_width(btn, LV_SIZE_CONTENT).auto 表示将按钮的宽度调整为包含所有子元素并自动适应内容的大小。 简单来说这意味着 LV_SIZE_CONTENT 会根据子元素的大小自动调整父元素的尺寸确保容纳所有内容。就像在 CSS 中使用 auto 可以让元素自动适应其内容一样使用 LV_SIZE_CONTENT 也能够让 LVGL 的对象自动调整大小以包含其内部的所有子元素。
当x0y0时坐标表示相对于父元素的左上角加上左/上内边距和边框宽度。 宽度/高度表示整体尺寸而“content area”内容区域会考虑内边距和边框宽度因此实际内容区域较小。 提供对Flexbox和Grid布局的支持但仅实现了它们的子集功能。
2.3 lv_obj的使用
创建一个lv_obj
首先我们需要知道一个类型:lv_obj_t如果我们想创建之后拿到这个部件我们就需要使用这个类型来存储 创建lv_obj形式
lv_obj_t *obj lv_obj_create(parent);参数类型为lv_obj_t *
其中parent为你需要设置的父类换句话说它决定了新创建的对象在界面上的层级关系和位置。如果把界面比作一个家庭parent就像是新对象的父母它确定了新对象在家庭中的位置和归属关系。在程序中这意味着新对象将会被添加到parent对象的子元素列表中并且它的位置和大小可能会受到parent对象的影响。
其中在lvgl中最顶级的父类可以这样创建lv_scr_act()他会返回一个lv_obj_t * 可以看到左上角就是我们创建的类似于div的东西了
设置大小
我们可以使用
lv_obj_set_width(obj, new_width)
lv_obj_set_height(obj, new_height)
lv_obj_set_size(obj, new_width, new_height).他们的作用分别是设置obj的宽度高度或者高度和宽度一起设置
示例代码
lv_obj_t *obj1 lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,500,500);我们还可以使用lv_pct函数设置相对于父类的百分比大小
lv_obj_t *obj1 lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,lv_pct(50),lv_pct(50));这样就刚好一半了我们改变窗口大小他也会一起改变
设置位置
我们可以使用下面三个函数来设置obj的位置
lv_obj_set_x(obj, new_x)
lv_obj_set_y(obj, new_y)
lv_obj_set_pos(obj, new_x, new_y)他们分别是设置obj的x位置、y位置和x,y一起设置
示例代码
lv_obj_t *obj1 lv_obj_create(lv_scr_act());
lv_obj_set_size(obj1,lv_pct(50),lv_pct(50));
lv_obj_set_pos(obj1,220,200);需要知道的是只要是可以填单位的地方百分比和像素都可以填如果不是百分比/LV_SIZE_CONTENTD都是像素为单位
设置对齐
LVGL提供函数可以让一个obj相对于父类进行对齐 设置形式
lv_obj_set_align(obj, LV_ALIGN_...)示例代码
lv_obj_t *obj1 lv_obj_create(lv_scr_act());
lv_obj_set_align(obj1,LV_ALIGN_CENTER);我们除了对齐父对象我们还可以指定对齐的对象
lv_obj_align_to(obj_to_align, obj_reference, LV_ALIGN_..., x, y)其中xy是对齐后偏移的数量比如x轴如果是10则对齐后向右偏移10y轴也是一样的
对齐的一些宏
父对象与子对象
lv_obj_set_parent(obj, new_parent)
lv_obj_get_parent(obj)我们可以通过上面来设置/获取某个对象的父类
我们可以使用
lv_obj_get_child(parent, idx)获取某个对象的指定下标的子类参数2为下标从0开始
lv_obj_get_child_count(parent)我们可以使用上面这个函数来获取某个obj父类的子类个数
比如可以这样操作
uint32_t i;
for(i 0; i lv_obj_get_child_count(parent); i) {lv_obj_t * child lv_obj_get_child(parent, i);/*Do something with child*/
}除了上面这些函数还有一些其他的对于我们操作的函数 lv_obj_get_index(obj)这个函数返回一个对象在其父对象中的索引。它等同于父对象中比该对象年轻的子对象的数量。例如如果一个对象是父对象的第一个子对象那么它的索引为0。
下面三个函数会改变他们在界面上的显示效果 lv_obj_move_foreground(obj) 和 lv_obj_move_background(obj)这两个函数用于将对象置于前景或背景。通过调用 lv_obj_move_foreground(obj)你可以将指定对象移到其父对象的子对象列表的最前面使其显示在其他对象的上方。相反lv_obj_move_background(obj) 将对象移到列表的最后使其显示在其他对象的下方。
lv_obj_move_to_index(obj, index)这个函数用于改变对象在其父对象中的索引从而改变其在层次结构中的显示顺序。通过指定新的索引你可以将对象移动到父对象的子对象列表的特定位置。
lv_obj_swap(obj1, obj2)这个函数用于交换两个对象在其父对象中的位置。调用此函数将 obj1 和 obj2 在父对象的子对象列表中的位置互换从而改变它们在层次结构中的显示顺序。
事件
事件就是触发了一个事情然后去执行一个函数
为一个obj添加一个事件
void lv_obj_add_event_cb(lv_obj_t *obj, lv_event_cb_t event_cb, lv_event_code_t filter, void *user_data)参数1为你要设置事件的对象参数3为事件的类型比如点击LV_EVENT_CLICKED 参数2为回调函数参数4为要传递的信息(如果没有可以传NULL)
其中回调函数这样写
static void my_event_cb(lv_event_t * event)
{printf(Clicked\n);
}示例代码
#include stdlib.h
#include unistd.h#include lvgl/lvgl.hvoid callback(lv_event_t *e)
{printf(clicked\n);
}void LV_OBJ()
{lv_obj_t *obj1 lv_obj_create(lv_scr_act());lv_obj_add_event_cb(obj1,callback,LV_EVENT_CLICKED,NULL);
} 总结
在LVGL中lv_obj作为基础对象扮演着关键的角色。通过lv_obj开发者可以创建、管理和控制各种图形元素如窗口、按钮、标签等。lv_obj提供了丰富的功能和方法使得开发者能够轻松实现各种复杂的用户界面。
本文介绍了lv_obj的基本概念重点阐述了其在LVGL图形库中的作用和用法。通过深入理解lv_obj开发者可以更加高效地利用LVGL进行嵌入式图形界面的设计与开发。希望本文能够为LVGL初学者提供一个良好的入门指南使他们能够更加轻松地掌握LVGL图形库的核心概念和使用方法。
