知不足而奋进 望远山而前行
目录
知不足而奋进 望远山而前行
文章目录
前言
1.图层
2.objects
2.1 位置
2.2 尺寸
2.3 align
2.4 样式
总结
前言
在嵌入式 GUI 开发中，LVGL（Light and Versatile Graphics Library）是一个强大的工具，它提供了丰富的功能来创建和定制用户界面。其中，样式的应用是使界面看起来整洁和专业的关键。本文将重点介绍如何使用LVGL的样式系统，通过设置对象的尺寸、位置、对齐方式和外观等属性，来实现界面组件的定制化展示。
1.图层
LVGL具有图层概念,从顶层到底层依次是sys_layer层、top_layer层、act_scr层。
top_layer层及sys_layer层用来创建一些随处可见的内容。
top_layer层可以用来创建菜单栏,弹出窗口等...
鼠标光标可以放在所有层的上面以确保它始终可见,也就是放在sys_layer层。
一般都是在act_scr层创建各种控件(widgets),也就是objects对象。
2.objects
在LVGL中,用户界面的基本构建块是对象,也称为Widgets。例如Button、Label、Image、List、图表或文本区域。
创建objects对象并显示在act_scr层上:
// 当前画面
lv_obj_t* screen = lv_scr_act();objects基本属性:
- 位置：
void lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y) - 尺寸：
void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h) - align：
void lv_obj_align(lv_obj_t * obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs) - 样式：
void lv_style_init(lv_style_t * style);
2.1 位置
objects设置位置的方法如下:
void lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y)参数1:objects对象
参数2和参数3:坐标x和y
实现代码:
void first_screen(){//创建objects对象lv_obj_t * obj = lv_obj_create(lv_scr_act());//设置objects对象的位置lv_obj_set_pos(obj,100,300);
}
2.2 尺寸
objects设置尺寸的方法如下:
void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)参数1:objects对象
参数2:宽度
参数3:高度
实现代码:
void first_screen(){lv_obj_t * obj = lv_obj_create(lv_scr_act());lv_obj_set_pos(obj,100,100);lv_obj_set_size(obj,300,500);
}2.3 align
lv_obj_align用来设置obj在父控件中的显示位置,定义如下:
void lv_obj_align(lv_obj_t * obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)参数1:objects对象
参数2:展示方式
参数3:在x方向的偏移
参数4:在y方向的偏移
实现代码:
void first_screen(){lv_obj_t * obj = lv_obj_create(lv_scr_act());lv_obj_set_size(obj, 200, 200);lv_obj_align(obj,LV_ALIGN_TOP_MID,0,0);
}
常见的展示方式有:
LV_ALIGN_DEFAULT = 0,
LV_ALIGN_TOP_LEFT,
LV_ALIGN_TOP_MID,
LV_ALIGN_TOP_RIGHT,
LV_ALIGN_BOTTOM_LEFT,
LV_ALIGN_BOTTOM_MID,
LV_ALIGN_BOTTOM_RIGHT,
LV_ALIGN_LEFT_MID,
LV_ALIGN_RIGHT_MID,
LV_ALIGN_CENTER
2.4 样式
Styles用于设置对象的外观。样式是一个lv_style_t类型的变量,它可以保存边框宽度、文本颜色等属性。
创建样式变量:
static lv_style_t style;初始化样式方法:
void lv_style_init(lv_style_t * style);给objects添加style:
void lv_obj_add_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector)参数1:objects对象
参数2:style样式
参数3:设置obj的状态或part,这里默认写0即可
经常设置的样式:
//设置obj的宽度和高度
void lv_style_set_width(lv_style_t * style, lv_coord_t value);
void lv_style_set_height(lv_style_t * style, lv_coord_t value);
//设置obj的x和y坐标
void lv_style_set_x(lv_style_t * style, lv_coord_t value);
void lv_style_set_y(lv_style_t * style, lv_coord_t value);
//设置背景圆角半径
void lv_style_set_radius(lv_style_t * style, lv_coord_t value);
//上下左右的padding值
void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);
void lv_style_set_pad_bottom(lv_style_t * style, lv_coord_t value)
void lv_style_set_pad_left(lv_style_t * style, lv_coord_t value);
void lv_style_set_pad_right(lv_style_t * style, lv_coord_t value);
// 设置背景颜色
lv_style_set_bg_color(&style1,lv_palette_main(LV_PALETTE_PINK));代码实现:
void first_screen(){//创建样式static lv_style_t style;//初始化lv_style_init(&style);//设置宽度和高度lv_style_set_width(&style,100);lv_style_set_height(&style,100);//设置圆角半径lv_style_set_radius(&style, 20);//设置x坐标lv_style_set_x(&style,100);lv_style_set_y(&style,100);//创建显示对象lv_obj_t * obj = lv_obj_create(lv_scr_act());//设置样式lv_obj_add_style(obj, &style, 0);
}
总结
本文详细讲解了如何在LVGL中创建和应用样式，以及配置界面对象的位置和大小。首先，我们学习了如何初始化样式并设置其属性，如宽度、高度、圆角半径等。接着，展示了如何创建对象并将之前定义的样式应用于对象上，从而实现界面元素的外观定制。此外，还介绍了LVGL中常用的对齐方式和样式设置方法，使开发者能够根据具体需求调整和优化界面的显示效果。
