LVGL笔记8--lv_style样式
LVGL笔记8–lv_style样式
样式是用来修饰UI美观性，使用lv_style对UI界面进行重绘和重用，利用多个不同的样式来形成Theme对象。对于vl_obj基础对象而言，每个对象都有一个lv_style样式，但对于其他的控件（比如lv_btn按钮控件）可能拥有多个样式，因为一个稍微复杂的控件可能是由多个子部件组成，而每一个子部件可能都需要相应的样式来修饰，所以表面上看来这个控件拥有了多个样式。
样式结构图
主要数据类型
-
边框部件数据类型
//用于描述到底绘制哪几条边框，这些值可以进行OR或操作，进行组合赋值 enum { LV_BORDER_NONE = 0x00, //无边框 LV_BORDER_BOTTOM = 0x01, //底边框 LV_BORDER_TOP = 0x02, //上边框 LV_BORDER_LEFT = 0x04, //左边框 LV_BORDER_RIGHT = 0x08, //右边框 LV_BORDER_FULL = 0x0F, //四条边框 LV_BORDER_INTERNAL = 0x10, //用于类矩阵的控件,如矩阵按钮 }; typedef uint8_t lv_border_part_t; -
阴影数据类型
enum { LV_SHADOW_BOTTOM = 0, //只绘制底部阴影 LV_SHADOW_FULL, //绘制所有边的阴影 }; typedef uint8_t lv_shadow_type_t; -
样式句柄数据类型（一个嵌套型的结构体）
typedef struct { uint8_t glass : 1; //----样式继承标志位 struct { lv_color_t main_color; lv_color_t grad_color; lv_coord_t radius; lv_opa_t opa; struct { lv_color_t color; lv_coord_t width; lv_border_part_t part; lv_opa_t opa; } border; struct { lv_color_t color; lv_coord_t width; lv_shadow_type_t type; } shadow; struct { lv_coord_t top; lv_coord_t bottom; lv_coord_t left; lv_coord_t right; lv_coord_t inner; } padding; } body;//--------背景样式 struct { lv_color_t color; lv_color_t sel_color; const lv_font_t * font; lv_coord_t letter_space; lv_coord_t line_space; lv_opa_t opa; } text;//---------text文本 struct { lv_color_t color; lv_opa_t intense; lv_opa_t opa; } image;//----------image图像 struct { lv_color_t color; lv_coord_t width; lv_opa_t opa; uint8_t rounded : 1; } line;//-----------line线条 } lv_style_t;
结构体中各种style样式介绍
-
main_color
这个是用来设置背景上半部分颜色，结合grad_color属性可以实现对象的纯色背景或者是从上到下的渐变色背景，这两个背景色设置后，中间部分会自动淡化，呈现出渐变色效果。
static lv_style_t my_style; //定义一个样式 lv_style_copy(&my_style,&lv_style_plain_color); //拷贝样式 my_style.body.main_color = LV_COLOR_RED; //上半部分为红色 my_style.body.grad_color = LV_COLOR_GREEN; //下半部分为绿色 lv_obj_set_style(obj1,&my_style); //设置样式 -
grad_color
用法和main_color的作用是差不多的，用来设置控件下半部分的背景 -
radius
这是用来设置控件的圆角效果的，例如按钮的四角圆角半径
lv_obj_set_size(obj1,100,60); static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.body.radius = 30; //设置圆角半径（LV_RADIUS_CIRCLE此宏可以设置半圆） lv_obj_set_style(obj1,&my_style); -
opa
这个是用来设置背景透明度的（0是全透明，255是不透明）
lv_label_set_text(label1,"I am a label"); //设置 label1 的文本 static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.body.main_color = LV_COLOR_RED; my_style.body.grad_color = LV_COLOR_RED; my_style.body.opa = 160; lv_obj_set_style(obj1,&my_style); -
border
这个是用来设置边框，其内部内容如下
struct { lv_color_t color; //边框颜色 lv_coord_t width; //边框宽度 lv_border_part_t part; //绘制哪几条边框 lv_opa_t opa; //边框的透明度 } border; //请看下面例子(只给出关键示意代码) static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.body.border.color = LV_COLOR_RED; //设置边框颜色 my_style.body.border.width = 5; //设置边框宽度 my_style.body.border.part = LV_BORDER_FULL; //设置四条边框都要显示 //LV_BORDER_TOP|LV_BORDER_LEFT 只显示上边和左边的边框 my_style.body.border.opa = LV_OPA_COVER; //完全不透明 lv_obj_set_style(obj1,&my_style); -
shadow
这个是用来设置阴影效果的，内部结构如下
struct { lv_color_t color;//阴影的颜色 lv_coord_t width;//阴影的宽度 lv_shadow_type_t type;//阴影的类型,是四周全部阴影还只是底部阴影 } shadow; //请看下面例子(只给出关键示意代码) static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.body.shadow.color = LV_COLOR_RED; //阴影颜色 my_style.body.shadow.width = 20; //阴影宽度 my_style.body.shadow.type = LV_SHADOW_FULL; //四周都要有阴影 lv_obj_set_style(obj1,&my_style); -
padding
这个是用来设置其内边距的，内部结构如下
struct { lv_coord_t top; //上边距 lv_coord_t bottom; //下边距 lv_coord_t left; //左边距 lv_coord_t right; //右边距 lv_coord_t inner; //内部之间的间隙 } padding; //请看下面例子(只给出关键示意代码) static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.body.padding.top = 100; my_style.body.padding.left = 80; my_style.body.padding.bottom = 60; my_style.body.padding.right = 40; lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&my_style); -
text文本
这个是用来设置文本效果的，其内部结构如下
struct { lv_color_t color; //文本颜色 lv_color_t sel_color; //选中文本的背景颜色 const lv_font_t * font; //所用的字体 lv_coord_t letter_space; //字符之间的水平距离 lv_coord_t line_space; //字符之间的垂直距离 lv_opa_t opa; //文本的透明度 } text; //请看下面例子(只给出关键示意代码) lv_label_set_text(label1,"letter_space\nline_space"); static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.text.color = LV_COLOR_RED; //字体为红色 my_style.text.font = &lv_font_roboto_28; //使用大号字体,必须得在 lv_conf.h 中使能相应的字体,这里是 LV_FONT_ROBOTO_28 宏 my_style.text.opa = LV_OPA_COVER; //完全不透明 my_style.text.letter_space = 10; //文字水平间距 my_style.text.line_space = 20; //文字垂直间距 lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&my_style); -
image图像
这个是用来设置图片样式的，其内部结构如下
struct { lv_color_t color; //混合的颜色 lv_opa_t intense; //混合的强度 lv_opa_t opa; //图片的透明度 } image; //把图片的每一个像素点数据与指定混合的颜色按照指定混合强度进行混合，产生新的像素点数据后显示出来 -
line线条
struct { lv_color_t color;//线条的颜色 lv_coord_t width;//线条的宽度 lv_opa_t opa;//线条的透明度 uint8_t rounded : 1; //线条的末尾是否用圆角来绘制 } line;static const lv_point_t p[] = {{0, 0}, {100, 0}}; //至少 2 点才能构成一条线 lv_obj_t * line1 = lv_line_create(src, NULL); //创建线对象 lv_obj_set_pos(line1, 50, 50); lv_line_set_points(line1, p, 2); //设置坐标点 static lv_style_t my_style; lv_style_copy(&my_style,&lv_style_plain_color); my_style.line.color = LV_COLOR_RED; //设置线的颜色 my_style.line.width = 10; //设置线的宽度 my_style.line.rounded = 1; //线末尾用圆角来绘制 my_style.line.opa = LV_OPA_COVER; //完全不透明 lv_line_set_style(line1,LV_LINE_STYLE_MAIN,&my_style);
API函数接口
-
样式初始化
void lv_style_init(void);这个接口用来初始化自带的系统样式，由littleVGL内部自行完成调用，LVGL自带13个系统样式，如下
lv_style_t lv_style_scr; lv_style_t lv_style_transp; lv_style_t lv_style_transp_fit; lv_style_t lv_style_transp_tight; lv_style_t lv_style_plain; lv_style_t lv_style_plain_color; lv_style_t lv_style_pretty; lv_style_t lv_style_pretty_color; lv_style_t lv_style_btn_rel; lv_style_t lv_style_btn_pr; lv_style_t lv_style_btn_tgl_rel; lv_style_t lv_style_btn_tgl_pr; lv_style_t lv_style_btn_ina; -
样式拷贝
/*------------------------------------------------------------------------------- dest:目的样式，即拷贝给谁 text：源样式，即从哪拷贝 ---------------------------------------------------------------------------------*/ void lv_style_copy(lv_style_t * dest, const lv_style_t * src); -
混合样式
/*------------------------------------------------------------------------------- start: 起始样式 text: 终止样式 res: 混合后的结果样式 ratio: 混合因子,范围为:[0,256] ---------------------------------------------------------------------------------*/ void lv_style_mix(const lv_style_t * start, const lv_style_t * end, lv_style_t *res, uint16_t ratio); -
使用样式
/*------------------------------------------------------------------------------- obj: 对象句柄 type: 这个参数对基础对象无效,对其他控件有效,用于设置控件上某个部件的样式 style: 设置的样式,必须得是静态的或全局的或堆上分配的 ---------------------------------------------------------------------------------*/ //基础对象设置样式 void lv_obj_set_style(lv_obj_t * obj, const lv_style_t * style); //其他控件设置样式,其中 xxx 代表未知的控件名(label,btn 等等) void lv_xxx_set_style(lv_obj_t *obj, lv_xxx_style_t type, const lv_style_t * style); -
刷新样式
void lv_obj_refresh_style(lv_obj_t * obj);样式发生改变后必须调用这个函数，进行样式的刷新。
-
刷新样式（作用于多个对象）
void lv_obj_report_style_mod(lv_style_t * style);style：要被刷新的样式
通知已使用了style样式的所有对象，此style样式已经发生了改变，请及时更新界面
有些函数接口没有总结
根据正点原子的LVGL教程总结的笔记，以后使用中遇到问题会继续总结在这里。
2021-2-3-WRS