【LVGL】组件的样式的设置、更改、删除API函数

给修饰对象给定修饰参数进行修饰

基于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

---

目录

样式使用要进行初始化

设置样式的属性

属性集函数：

删除属性接口函数：

获取属性的值 ：

重置样式

添加/删除样式

状态(States)

部分(Part)

添加样式

删除样式

删除所有样式

删除特定样式

报告样式更改

获取对象的属性值

本地样式

样式过渡效果

样式主题

---

样式使用要进行初始化

样式的变量应该是 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提供一个默认外观，然后可以通过添加更多样式对其进行修改。

要为显示设置主题，需要两个步骤：

1. 初始化一个主题
2. 将初始化的主题分配给显示器

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 ~  样式设置就这样结束啦！

后续用到啥功能再添加！