本篇文章目录导航
♠♠ LVGL基础对象
♣♣♣♣ 一、LVGL编程思想
♣♣♣♣ 二、LVGL基础对象
♦♦♦♦♦♦♦♦ 2.1 父子结构
♦♦♦♦♦♦♦♦ 2.2 创建和删除对象
♦♦♦♦♦♦♦♦ 2.3 Units(单位)
♦♦♦♦♦♦♦♦ 2.4 Positon(位置)
♦♦♦♦♦♦♦♦ 2.5 Align(对齐)
♦♦♦♦♦♦♦♦ 2.6 Size(大小)
♦♦♦♦♦♦♦♦ 2.7 Style(样式)
♦♦♦♦♦♦♦♦ 2.8 Events(事件)
#LVGL基础对象
##一、LVGL编程思想
LVGL采用的是“面向对象”的编程思想,以抽象的类来实例化不同的对象(部件)。C语言中没有类的概念,LVGL以结构体的形式来实现类的思维。
在LVGL中,用户界面的基本组成部分是对象(控件),也称为 Widgets。例如,一个 按钮、标签、图像、列表、图表 或者 文本区域。
所有的对象都使用 lv_obj_t 指针作为句柄进行引用。之后可以使用该指针来设置或获取对象的属性。
##二、LVGL基础对象
基础对象(lv_obj)可以作为父对象来创建其它对象,同时也可作为部件使用。
所有的对象类型都有一些通用的基本属性:位置、大小、父级、样式、事件处理程序等。可以使用 lv_obj_set_… 和 lv_obj_get_… 函数设置或者获取这些属性。例如:
/* 设置基本对象属性 */
lv_obj_set_size(btn1, 100, 50); /* 设置按钮的大小 */
lv_obj_set_pos(btn1, 20,30); /* 设置按钮的位置 */
对象类型也有特殊的属性。例如,滑块有:最小值和最大值、当前值。针对这些特殊属性,每个对象类型可能有独特的API函数。例如,对于滑块:
/* 设置滑块特定属性 */
lv_slider_set_range(slider1, 0, 100); /* 设置最小值和最大值 */
lv_slider_set_value(slider1, 40, LV_ANIM_ON); /* 设置当前值(位置) */
所有控件的API在它们各自的文档中有描述,但也可以查看相应的头文件(例如, widgets/lv_slider.h)。
###2.1 父子结构
一个父对象可以被视为其子对象的容器。每个对象都必须会有且仅有一个父对象(屏幕除外),但一个父对象可以有任意数量的子对象。 父对象的类型没有限制。
父和子对象的关系:
1、子对象会随着父对象移动。
2、子对象的位置超出父对象的范围,则超出的部分不显示。
小实验演示一:子对象会随着父对象移动
void my_gui(void)
{
lv_obj_t *parent = lv_obj_create(lv_scr_act()); /* 创建父对象,默认大小 */
lv_obj_set_size(parent, 400, 240); /* 设置父对象的大小 */
lv_obj_t * child = lv_obj_create(parent); /* 在先前创建的父对象上创建一个子对象 */
lv_obj_set_pos(child, 50, 10); /* 设置子对象的位置 */
lv_obj_align(parent, LV_ALIGN_CENTER, 0, 0); /* 居中父对象的位置 */
}
演示图片:
演示视频:子对象会随着父对象移动
可以看出:子对象会随着父对象移动。
小实验演示二:子对象的位置超出父对象的范围,则超出的部分不显示。
void my_gui(void)
{
lv_obj_t *parent = lv_obj_create(lv_scr_act());
lv_obj_set_size(parent, 400, 240); /* 设置父对象的大小 */
lv_obj_t * child = lv_obj_create(parent); /* 在先前创建的父对象上创建一个对象 */
lv_obj_set_size(child, 200, 120); /* 设置子对象的大小 */
lv_obj_set_pos(child, -100, -60); /* 设置子对象的位置 */
}
演示图片:
演示视频:子对象的位置超出父对象的范围,则超出的部分不显示
可以看出:子对象的位置超出父对象的范围,则超出的部分不显示。
###2.2 创建和删除对象
在LVGL中,可以在运行时动态创建或删除对象。即当对象被创建之后才会消耗内存资源。因此,可以在点击按钮准备打开新界面(屏幕)时再创建新界面(屏幕),并在加载新界面(屏幕)时删除旧界面(屏幕)。
UI可以根据设备的当前环境进行创建。例如,可以根据当前连接的传感器创建仪表、图表、条形图和滑块所需的UI再进行创建(比如之前需要图标,突然传感器去掉了,那么可以选择不创建该ui控件)。
每个控件都有自己的** create 函数**,函数原型如下:
点击1、LVGL基础对象(lv_obj)——古月居可查看全文