【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


目录

样式使用要进行初始化

设置样式的属性

属性集函数:

扫描二维码关注公众号,回复: 14390518 查看本文章

删除属性接口函数:

获取属性的值 :

重置样式

添加/删除样式

状态(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 ~  样式设置就这样结束啦!

后续用到啥功能再添加!

猜你喜欢

转载自blog.csdn.net/qq_41650023/article/details/125467967