给修饰对象给定修饰参数进行修饰
基于LVGL手册写的文章!
所有的样式和属性官方文档都有提供
LVGL基本也是借用CSS的样式。
样式是一个 lv_style_t 变量,它可以保存边框宽度、文本颜色等属性。它类似于 CSS 中的 class
LVGL属性的完整列表https://docs.lvgl.io/master/overview/style-props.html
LVGL样式的设置介绍页面https://docs.lvgl.io/master/overview/style.html
目录
样式使用要进行初始化
样式的变量应该是 static 、全局或动态分配。在使用样式之前,应该被初始化,初始化后才可添加或更改属性
static lv_style_t style_obj;
lv_style_init(&style_obj);
设置样式的属性
属性集函数:
lv_style_set_<property_name>(&style, <value>);
//设置背景颜色
lv_style_set_bg_color(&style, lv_color_hex(0x115588));
删除属性接口函数:
//删除背景颜色设置
lv_style_remove_prop(&style, LV_STYLE_BG_COLOR);
获取属性的值 :
lv_style_value_t v;//定义一个参数用来存储
lv_res_t res = lv_style_get_prop(&style, LV_STYLE_BG_COLOR, &v);//读取其背景颜色
if(res == LV_RES_OK) { //判断读取成功
do_something(v.color);//做些其他用途
}
关于 lv_style_value_t :
/**
* A common type to handle all the property types in the same way.
*/
typedef union {
int32_t num; /**< Number integer number (opacity, enums, booleans or "normal" numbers)*/
const void * ptr; /**< Constant pointers (font, cone text, etc)*/
lv_color_t color; /**< Colors*/
} lv_style_value_t;
- num:整数、布尔、不透明度属性
- ptr:指针属性
- color:颜色属性
重置样式
释放其所有的数据、
lv_style_reset(&style);
还有 const 方法构建样式,在此不说,还是看官方手册。
添加/删除样式
状态(States)
就是设置样式的第三个参数
举例:
- LV_STATE_DEFAULT (0x0000) 正常,释放状态
- LV_STATE_CHECKED (0x0001) 切换或检查状态
- LV_STATE_FOCUSED (0x0002) 通过键盘或编码器聚焦或通过触摸板/鼠标点击
- LV_STATE_FOCUS_KEY (0x0004) 通过键盘或编码器聚焦,但不通过触摸板/鼠标聚焦
- LV_STATE_EDITED (0x0008) 由编码器编辑
- LV_STATE_HOVERED (0x0010) 鼠标悬停(现在不支持)
- LV_STATE_PRESSED (0x0020) 被按下
- LV_STATE_SCROLLED (0x0040) 正在滚动
- LV_STATE_DISABLED (0x0080) 禁用状态
- LV_STATE_USER_1 (0x1000) 自定义状态
- LV_STATE_USER_2 (0x2000) 自定义状态
- LV_STATE_USER_3 (0x4000) 自定义状态
- LV_STATE_USER_4 (0x8000) 自定义状态
部分(Part)
对象可以有部分(parts) ,它们也可以有自己的样式。LVGL 中存在以下预定义部分:
- LV_PART_MAIN 类似矩形的背景
- LV_PART_SCROLLBAR 滚动条
- LV_PART_INDICATOR 指标,例如用于滑块、条、开关或复选框的勾选框
- LV_PART_KNOB 像手柄一样可以抓取调整值
- LV_PART_SELECTED 表示当前选择的选项或部分
- LV_PART_ITEMS 如果小部件具有多个相似元素(例如表格单元格)
- LV_PART_TICKS 刻度上的刻度,例如对于图表或仪表
- LV_PART_CURSOR 标记一个特定的地方,例如文本区域或图表的光标
- LV_PART_CUSTOM_FIRST 可以从这里添加自定义部件。
添加样式
其中,<selector>部分是应添加样式的部件和状态的OR-ed值。设置对象的状态和部分,设置多个参时,采取或运算。
可以给定许多样式,然后给定对象的不同部分、不同状态使用。
lv_obj_add_style(obj, &style, <selector>);
删除样式
删除所有样式
lv_obj_remove_style_all(obj);
删除特定样式
仅当 selector 与 lv_obj_add_style 中使用的 selector 匹配时,此函数才会删除 style。
lv_obj_remove_style(obj, style, selector);
报告样式更改
如果已分配给对象的样式发生更改(即添加或更改属性),则应通知使用该样式的对象。有 3 个选项可以执行此操作:
//如果您知道更改的属性可以通过简单的重绘(例如颜色或不透明度更改)应用,只需调用
lv_obj_invalidate(obj) 或 lv_obj_invalidate(lv_scr_act())。
//如果更改或添加了更复杂的样式属性,并且您知道哪些对象受该样式影响,则调用
lv_obj_refresh_style(obj, part, property)。
//要刷新所有部件和属性,请使用
lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY)。
//要让 LVGL 检查所有对象是否使用该样式并在需要时刷新它们,请调用
lv_obj_report_style_change(&style)。
//如果 style 为 NULL,所有对象都会收到有关样式更改的通知。
获取对象的属性值
lv_obj_get_style_<property_name>(obj, <part>);
例如:
这些函数使用对象的当前状态,如果没有更好的候选对象,则返回默认值。
lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN);
本地样式
设置本地样式函数接口:
lv_obj_set_style_<property_name>(obj, <value>, <selector>);
其他方面与普通样式相似。就是没有结构体了,一条一条的设置。
LVGL 本地样式可以分配给状态(pseudo-classes)和部件(pseudo-elements)。
同时设置本地样式和普通样式时,本地样式优先级更高!和程序位置无关。
样式过渡效果
默认情况下,当一个对象改变状态(例如它被按下)时,新状态的新属性会立即设置。
但是,使用转换可以在状态更改时播放动画。 例如,按下按钮时,其背景颜色可以在 300 毫秒内被动画化为按下的颜色。
过渡的参数储存在样式中,可以设置:
- 过渡时期
- 开始过渡前的延迟
- 动画路径(也称为计时或缓动功能)
- 动画的属性
需要初始化 lv_transition_dsc_t 类型的变量并添加到样式中。
static const lv_style_prop_t trans_props[] = {
LV_STYLE_BG_OPA, LV_STYLE_BG_COLOR,
0, /*结束标志r*/
};
static lv_transition_dsc_t trans1;
lv_style_transition_dsc_init(&trans1, trans_props, lv_anim_path_ease_out, duration_ms, delay_ms);
lv_style_set_transition(&style1, &trans1);
样式主题
主题是样式的集合。如果存在活动主题,LVGL将其应用于每个创建的部件(对象)。 这将为UI提供一个默认外观,然后可以通过添加更多样式对其进行修改。
要为显示设置主题,需要两个步骤:
- 初始化一个主题
- 将初始化的主题分配给显示器
lv_theme_t * th = lv_theme_default_init
(display, /*使用此显示器DPI、SIZE等*/
LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN, /*主次颜色*/
false, /*亮暗模式*/
&lv_font_montserrat_10, &lv_font_montserrat_14, &lv_font_montserrat_18 /*小字体、普通字体、大字体*/
);
lv_disp_set_theme(display, th); /* 将主题指定给显示器 */
以及有些零零散散的没有提及的东西。
OK ~ 样式设置就这样结束啦!
后续用到啥功能再添加!