LVGL官方文档-7.11.0-12-Overview-Styles
Style用于给Object设置外观。LVGL中的Style由CSS启发，其设计理念大致如下：
- Style是一个lv_style_t类型的变量，其中保存属性，如边框宽度，文字颜色等。类似于CSS中的class。
- 使用的时候不需要指定全部属性，未指定的属性为默认值。
- Style可以赋值给Object来改变其外观。
- 同一个Style可以由多个Object共用。
- Style可以是级联的。这意味着可以将多个Style赋值给同一个Object。例如style_btn用于显示一个灰色的按钮，style_btn_red可以仅仅在其基础上增加一个红色的背景，来覆盖其背景色属性。
- 后添加的Style有更高的优先级。这意味着如果两个Style指定了同一个属性，那么会使用后添加的。
- 有一些属性（如文本颜色）如果Object没有指定，可以从父Object继承。
- Object可以有比普通Style优先级更高的本地Style。
- 与CSS（用pseudo-class来描述状态，如:hover）不同，LVGL中的属性是明确指定State的。即与状态相关的不是class，而是单个的属性。
- 当状态变化的时候，可以使用过渡。
States
Object可以处于以下状态：
- LV_STATE_DEFAULT (0x00)
- LV_STATE_CHECKED (0x01)
- LV_STATE_FOCUSED (0x02)
- LV_STATE_EDITED (0x04)
- LV_STATE_HOVERED (0x08)
- LV_STATE_PRESSED (0x10)
- LV_STATE_DISABLED (0x20)
上述状态也可以组合，如LV_STATE_FOCUSED | LV_STATE_PRESSED。
Style的属性可以在每种状态或者状态组合中定义，例如为Default状态和Pressed的状态定义不同的背景色。如果某种状态下的某个属性没有定义，就会使用最匹配的状态的属性。通常这意味着使用LV_STATE_DEFAULT的属性。如果这个属性在默认状态也没有定义，就会使用默认值（后面会详细叙述）。
但是“最匹配的状态的属性”是什么意思呢？状态根据其值有优先级（见上面的列表）。较大的值对应较高的优先级。这里举个例子来说明这种优先级。比如说背景色的定义如下：
- LV_STATE_DEFAULT 白色
- LV_STATE_PRESSED 灰色
- LV_STATE_FOCUSED 红色
- 默认情况下，Object处于Default状态，这种情况很简单，背景色在当前状态中定义为了白色。
- 当Object被按下，就出现了2个相关的属性：Default（Default与每一种State都相关联）定义的白色和Pressed定义的灰色。Pressed的优先级为0x10，这比Default的0x00高，所以会使用灰色。
- 同上一点类似，当Object拥有了焦点，那么就会使用红色，因为Focused的优先级比Default高。
- 当Object拥有焦点，并且被按下，那么灰色和红色都会匹配上，但是Pressed状态的优先级比Focused高，所以会使用灰色。
- 再增加定义LV_STATE_PRESSED | LV_STATE_FOCUSED为玫瑰色。这种情况下，这个组合状态的优先级就是0x02+0x10=0x12，这个优先级比Pressed和Focused都高，所以会选择玫瑰色。
- 如果这个Object是Checked，这个状态没有属性定义背景色。所以在没有更好的选择的情况下，这个Object保持Default定义的白色。
以下是一些实用建议：
- 如果你想为所有的State设置一项属性（如红色的背景色），设置Default状态即可。如果Object没有找到当前状态的属性，就会回退到Default状态。
- 复杂情况用“或”运算组合状态（如Pressed+Checked+Focused）。
- 为不同的State设置不同的Style元素也许是个好主意。例如，在Released，Pressed，Checked+Pressed，Focused，Focused+Pressed，Focused+Pressed+Checked等状态中找背景色会很复杂。相反，用背景色来区分Pressed和Checked状态，在用边框颜色来区分Focused状态。
Cascading styles
没必要在一个Style里面设置所有的属性，可以添加更多的Style到Object，让后添加的Style修改或者扩展之前的Style。例如创建一个通用的灰色按钮Style，然后创建一个红色按钮的Style，后者只设置红色的背景色。
这和CSS中这样的级联
是同样的概念。
后添加的Style比先添加的Style有更高的优先级。所以在上面的灰色/红色按钮的例子中，应该先添加通用按钮的灰色Style，然后再添加红色按钮的Style。然而状态的优先级仍然有效。下面举个例子：
- Basic Button Style为Default状态定义了深灰色，为Pressed状态定义了浅灰色。
- Red Button Style只定义了Default状态的红色背景色。
在这样的情况下，当按钮被释放（Default状态）它将呈现红色，因为在后添加的Style（红色Style）中找到了匹配。当按钮被按下时，因为状态匹配上，所以会显示成浅灰色，
Inheritance
有些属性（典型的是文本相关的属性）可以从父Object的Style中继承。仅当Object的Style中该项属性没有设置时，才会继承（包括Default状态）。这样的话，对于有继承性的属性，属性值也会在父Object中搜索，直到某个Part能提供这个属性的值。父Object会根据自身的状态提供值：如果按键被按下，且定义了这个状态的颜色，那么就会使用Pressed状态的文本颜色。
Parts
Ojbect由Part组成，Part可以有他们自己的Style。举例来说，Page由以下四个部分组成：
- Background
- Scrollable
- Scrollbar
- Edge flash
有三种类型的Part：Main，Virtual和Real。
Main Part通常是背景和Object最大的Part。有些Object只有一个Main Part。如Button只有一个Background。
Virtual Part只是绘制在Main Part上的附属的Part，其背后没有实际的Object。例如，Page的Scrollbar就不是一个实际的Object，而只是绘制Page的背景的时候绘制出来的。Virtual Part通常和Main Part的State一致。如果是可继承的属性，Main Part会先于其父Object被搜索。
Real Part是创建出来的实际的Object，由Main Part管理。例如Page的Scrollable Part是Real Part。Real Part可以和Main Part的State不同。
阅读Object的文档以查看其有哪些Part。
Initialize styles and set/get properties
Style存储在lv_style_t类型的变量里面。Style变量应该是static，global或者是动态分配的。换言之，它们不能是函数结束即销毁的内部的局部变量。在使用Style之前，变量需要调用lv_style_init(&my_style)初始化。初始化之后，就可以设置Style的属性或者增加属性了。设置属性的函数的形式是：lv_style_set_(&style, , )。例如，上面例子里面提到的函数如下：
static lv_style_t style1;
lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_bg_color(&style1, LV_STATE_PRESSED, LV_COLOR_GRAY);
lv_style_set_bg_color(&style1, LV_STATE_FOCUSED, LV_COLOR_RED);
lv_style_set_bg_color(&style1, LV_STATE_FOCUSED | LV_STATE_PRESSED, lv_color_hex(0xf88));
也可以用lv_style_copy(&style_destination, &style_source)来复制Style。复制之后，可正常添加属性。
用下面的函数删除属性：
lv_style_remove_prop(&style, LV_STYLE_BG_COLOR | (LV_STATE_PRESSED << LV_STYLE_STATE_POS));
从给定State的Style里面获取属性值用函数：_lv_style_get_color/int/opa/ptr(&style, , )。这个函数会获取到最匹配的属性值并返回优先级。如果属性没有找到，返回-1。
函数中的（…color/int/opa/ptr）由属性的类型决定。
举例来说：
v_color_t color;
int16_t res;
res = _lv_style_get_color(&style1, LV_STYLE_BG_COLOR | (LV_STATE_PRESSED << LV_STYLE_STATE_POS), &color);
if(res >= 0) {
//the bg_color is loaded into `color`
}
重置一个Style（释放其所有的数据）用下面的函数：
lv_style_reset(&style);
Managing style list
单独的一个Style没有什么用，它需要赋值给一个Object才能发挥作用。Object的每个Part都存储了一个Style的列表。这个列表是所有赋值过来的Style。
用lv_obj_add_style(obj, , &style)将Style添加给Object。例如：
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &btn); /*Default button style*/
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &btn_red); /*Overwrite only a some colors to red*/
Object的Style可以用lv_obj_reset_style_list(obj, )来重置。
如果一个Style在被赋值给Object之后发生了变化（如其属性被赋予了新值），那么Object需要用下面的函数来刷新：lv_obj_refresh_style(obj, part, property)。要刷新所有的Part和属性，用lv_obj_refresh_style(obj, LV_OBJ_PART_ALL, LV_STYLE_PROP_ALL)。
为了得到最终的属性值，包括级联，继承，Local Style和Transition之后的值，可以用函数：lv_obj_get_style_(obj, )。这些函数使用Object当前的State，如果没有更好的选择就返回默认值。例如：
lv_color_t color = lv_obj_get_style_bg_color(btn, LV_BTN_PART_MAIN);
Local styles
在Object的Style列表里面，也可以存储所谓的Local Property。这和CSS里面的
的概念是一致的。Local Style和普通Style一样，但是它只属于给定的Object，不能被其他Object共享。用lv_obj_set_style_local_(obj, , , )这样的函数来设置Local Property。例如：
lv_obj_set_style_local_bg_color(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
Transitions
默认情况下，当Object的状态改变（如按下了），新状态的属性值会立即生效。但是如果使用了Transition，状态改变时就可以播放动画。例如，按下按钮时，其背景色可以在300ms内渐变成按下状态的背景色。
Transition的参数存储在Style里面。可以设置的属性包括：
- Transition的时长
- 开始Transition前的延迟
- 动画的Path
- 要添加动画的属性
每个State的Transition属性都可以单独设置。例如为Default状态设置500ms的Transition时长，那么当Object要变成Default状态时，就会使用500ms的Transition时长。为Pressed状态设置100ms的Transition时长，那么当状态要变成Pressed的时候，就会使用100ms的Transition时长。这两种设置就会形成快速进入Pressed状态，缓慢回到Default状态的效果。
Properties
能用在Style里面的属性如下：
Mixed properties
- radius (lv_style_int_t)：设置背景的圆角。0：没有圆角，LV_RADIUS_CIRCLE：最大圆角。默认值：0。
- clip_corner (bool)：true：当radius > 0时是否裁减掉圆角部分的内容。默认值：false。
- size (lv_style_int_t)：Widget内部元素的尺寸。查看Widget的文档以确认其是否支持这个属性。默认值：LV_DPI / 20。
- transform_width (lv_style_int_t)：让Object两边都要宽这么多。默认值：0。
- transform_height (lv_style_int_t) ：让Object两边都要高这么多。默认值：0。
- transform_angle (lv_style_int_t)：旋转Image类型的Object，单位0.1度，即用450表示45度。默认值：0。
- transform_zoom (lv_style_int_t) ：缩放Image类型的Object。 256（or LV_IMG_ZOOM_NONE）表示不缩放，128表示缩放到一半，512表示放大一倍，以此类推。默认值：LV_IMG_ZOOM_NONE。
- opa_scale (lv_style_int_t)：可继承的属性。Object的所有透明度值都要乘以这个因子。因为可继承的缘故，子Object也会受到影响。默认值：LV_OPA_COVER。
Padding and margin properties
Padding设置的是边缘内侧的空隙。它的意思是：我不想我的子Object离我的边缘太近，所以请保持这个距离。
Padding Innger设置子Object之间的空隙。Margin设置边缘外侧的空隙，它的意思是：我想保持我周围的这个空隙。
这些属性通常用于layout或者auto fit使能时Container类Object。然而其他的Widget也用他们来设置空隙。详见Widget的文档。
- pad_top (lv_style_int_t)：设置顶部Padding。默认值：0。
- pad_bottom (lv_style_int_t)：设置底部Padding。默认值：0。
- pad_left (lv_style_int_t)：设置左边Padding。默认值：0。
- pad_right (lv_style_int_t)：设置右边Padding。默认值：0。
- pad_inner (lv_style_int_t)：设置Object内部子Object之间的空隙。默认值：0。
- margin_top (lv_style_int_t)：设置顶部Margin。默认值：0。
- margin_bottom (lv_style_int_t)：设置底部Margin。默认值：0。
- margin_left (lv_style_int_t)：设置左边Margin。默认值：0。
- margin_right (lv_style_int_t)：设置右边Margin。默认值：0。
Background properties
背景是有过渡和圆角的简单矩形。
- bg_color (lv_color_t)：指定背景的颜色。默认值：LV_COLOR_WHITE。
- bg_opa (lv_opa_t)：指定背景的不透明度。默认值：LV_OPA_TRANSP。
- bg_grad_color (lv_color_t)：指定过渡部分的背景颜色。当bg_grad_dir != LV_GRAD_DIR_NONE的时候，会设置右边或者底部梯度的颜色。 默认值：LV_COLOR_WHITE。
- bg_main_stop (uint8_t)：指定过渡部分从哪里开始。0：从最左边/最顶部开始，255：从最靠右/最靠下开始。默认值： 0。
- bg_grad_stop (uint8_t)：指定过渡部分到哪里结束。0：从最左边/最顶部结束，255：从最靠右/最靠下结束。默认值：255。
- bg_grad_dir (lv_grad_dir_t)：指定过渡部分的方向。可取LV_GRAD_DIR_NONE/HOR/VER。默认值：LV_GRAD_DIR_NONE。
- bg_blend_mode (lv_blend_mode_t)：设置混合模式。可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the background style properties
*/
void lv_ex_style_1(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
/*Make a gradient*/
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_bg_grad_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_bg_grad_dir(&style, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);
/*Shift the gradient to the bottom*/
lv_style_set_bg_main_stop(&style, LV_STATE_DEFAULT, 128);
lv_style_set_bg_grad_stop(&style, LV_STATE_DEFAULT, 192);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Border properties
Border是画在背景的上层，支持圆角。
- border_color (lv_color_t)：指定边框颜色。默认值：LV_COLOR_BLACK。
- border_opa (lv_opa_t)：指定边框的不透明度。默认值：LV_OPA_COVER。
- border_width (lv_style_int_t)：指定边框的宽度。默认值：0。
- border_side (lv_border_side_t)：指定边框画哪些边。可取：LV_BORDER_SIDE_NONE/LEFT/RIGHT/TOP/BOTTOM/FULL及其“或”运算后的值。默认值：LV_BORDER_SIDE_FULL。
- border_post (bool)：为True时，边框会在所有的子Object绘制之后再绘制。默认值：false。
- border_blend_mode (lv_blend_mode_t)：指定混合模式。可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the border style properties
*/
void lv_ex_style_2(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 20);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Add border to the bottom+right*/
lv_style_set_border_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_border_width(&style, LV_STATE_DEFAULT, 5);
lv_style_set_border_opa(&style, LV_STATE_DEFAULT, LV_OPA_50);
lv_style_set_border_side(&style, LV_STATE_DEFAULT, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Outline properties
Outline与Border类似，但是是画在Object之外的。
- outline_color (lv_color_t)：指定轮廓的颜色。默认值：LV_COLOR_BLACK。
- outline_opa (lv_opa_t)：指定轮廓的不透明度。默认值：LV_OPA_COVER。
- outline_width (lv_style_int_t)：指定轮廓的宽度。默认值：0。
- outline_pad (lv_style_int_t)：指定Object和轮廓之间的距离。默认值：0。
- outline_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the outline style properties
*/
void lv_ex_style_3(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Add outline*/
lv_style_set_outline_width(&style, LV_STATE_DEFAULT, 2);
lv_style_set_outline_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_outline_pad(&style, LV_STATE_DEFAULT, 8);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Shadow properties
Shadow是Object下面的模糊区域。
- shadow_color (lv_color_t)：指定阴影的颜色。默认值：LV_COLOR_BLACK。
- shadow_opa (lv_opa_t)：指定阴影的不透明度。默认值：LV_OPA_TRANSP。
- shadow_width (lv_style_int_t)：设置轮廓的宽度（模糊区域的尺寸）默认值：0。
- shadow_ofs_x (lv_style_int_t)：设置阴影的X方向偏移。默认值：0。
- shadow_ofs_y (lv_style_int_t)：设置阴影的Y方向偏移。默认值：0。
- shadow_spread (lv_style_int_t)：设置阴影比背景大多少。默认值：0。
- shadow_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the Shadow style properties
*/
void lv_ex_style_4(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Add a shadow*/
lv_style_set_shadow_width(&style, LV_STATE_DEFAULT, 8);
lv_style_set_shadow_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_shadow_ofs_x(&style, LV_STATE_DEFAULT, 10);
lv_style_set_shadow_ofs_y(&style, LV_STATE_DEFAULT, 20);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Pattern properties
Pattern是画在背景中间或者重复以填充整个背景的Image或者Symbol。
- pattern_image (const void *)：一个指向lv_img_dsc_t类型变量的指针，一个图像文件的路径或者一个符号。默认值：NULL。
- pattern_opa (lv_opa_t)：指定不透明度。默认值：LV_OPA_COVER。
- pattern_recolor (lv_color_t)：混合指定的颜色和Pattern，如果是Symbol（文本），就是文本的颜色。默认值：LV_COLOR_BLACK。
- pattern_recolor_opa (lv_opa_t)：混合的强度默认值：LV_OPA_TRANSP (no recoloring)。
- pattern_repeat (bool)：true：Pattern重复成马赛克。false：Pattern放置于背景的中央。默认值：false。
- pattern_blend_mode (lv_blend_mode_t)：指定渲染模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值： LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the pattern style properties
*/
void lv_ex_style_5(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Add a repeating pattern*/
lv_style_set_pattern_image(&style, LV_STATE_DEFAULT, LV_SYMBOL_OK);
lv_style_set_pattern_recolor(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_pattern_opa(&style, LV_STATE_DEFAULT, LV_OPA_50);
lv_style_set_pattern_repeat(&style, LV_STATE_DEFAULT, true);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Value properties
Value是绘制在背景中的任意文本。它可以用于创建Label对象的一种轻量化替代。
- value_str (const char *)：指向待显示的文本的指针。仅保存指针，故lv_style_set_value_str不要用本地变量，而是用static、glbal或者动态分配的变量。默认值：NULL。
- value_color (lv_color_t)：文本的颜色。默认值：LV_COLOR_BLACK。
- value_opa (lv_opa_t)：文本的不透明度。默认值：LV_OPA_COVER。
- value_font (const lv_font_t *)：指向文本字体的指针。默认值：NULL。
- value_letter_space (lv_style_int_t)：文本的字符间距。默认值：0。
- value_line_space (lv_style_int_t)：文本的行距。默认值：0。
- value_align (lv_align_t)：文本的对齐方式。可取LV_ALIGN_…。默认值：LV_ALIGN_CENTER。
- value_ofs_x (lv_style_int_t)：与对齐位置的X方向的偏移。默认值：0。
- value_ofs_y (lv_style_int_t)：与对齐位置的Y方便的便宜。默认值：0。
- value_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the value style properties
*/
void lv_ex_style_6(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Add a value text properties*/
lv_style_set_value_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_value_align(&style, LV_STATE_DEFAULT, LV_ALIGN_IN_BOTTOM_RIGHT);
lv_style_set_value_ofs_x(&style, LV_STATE_DEFAULT, 10);
lv_style_set_value_ofs_y(&style, LV_STATE_DEFAULT, 10);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
/*Add a value text to the local style. This way every object can have different text*/
lv_obj_set_style_local_value_str(obj, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, "Text");
}
Text properties
文本对象的属性。
- text_color (lv_color_t)：文本的颜色。默认值：LV_COLOR_BLACK。
- text_opa (lv_opa_t)：文本的不透明度。默认值：LV_OPA_COVER。
- text_font (const lv_font_t *)：文本的不透明度。默认值：NULL。
- text_letter_space (lv_style_int_t)：文本的字符间距。默认值：0。
- text_line_space (lv_style_int_t)：文本的行距。默认值：0。
- text_decor (lv_text_decor_t)：添加修饰符。可取LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH。默认值：LV_TEXT_DECOR_NONE。
- text_sel_color (lv_color_t)：选中部分的文本颜色。默认值：LV_COLOR_BLACK。
- text_sel_bg_color (lv_color_t)：选中部分的背景颜色。默认值：LV_COLOR_BLUE。
- text_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the text style properties
*/
void lv_ex_style_7(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_border_width(&style, LV_STATE_DEFAULT, 2);
lv_style_set_border_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_bottom(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 10);
lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_text_letter_space(&style, LV_STATE_DEFAULT, 5);
lv_style_set_text_line_space(&style, LV_STATE_DEFAULT, 20);
lv_style_set_text_decor(&style, LV_STATE_DEFAULT, LV_TEXT_DECOR_UNDERLINE);
/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_LABEL_PART_MAIN, &style);
lv_label_set_text(obj, "Text of\n"
"a label");
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Line properties
线条的属性。
- line_color (lv_color_t)：线条的颜色。默认值：LV_COLOR_BLACK。
- line_opa (lv_opa_t)：线条的不透明度。默认值：LV_OPA_COVER。
- line_width (lv_style_int_t)：线宽。默认值：0。
- line_dash_width (lv_style_int_t)：虚线的宽度。虚线只能是水平或者垂直的。0：不使用虚线。默认值：0。
- line_dash_gap (lv_style_int_t)：虚线之间空隙的大小。虚线只能是水平或者垂直的。0：不使用虚线。0：不使用虚线。默认值：0。
- line_rounded (bool):：true：虚线的端点有圆角。默认值：false。
- line_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the line style properties
*/
void lv_ex_style_8(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_line_color(&style, LV_STATE_DEFAULT, LV_COLOR_GRAY);
lv_style_set_line_width(&style, LV_STATE_DEFAULT, 6);
lv_style_set_line_rounded(&style, LV_STATE_DEFAULT, true);
#if LV_USE_LINE
/*Create an object with the new style*/
lv_obj_t * obj = lv_line_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_LINE_PART_MAIN, &style);
static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}};
lv_line_set_points(obj, p, 3);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
#endif
}
Image properties
Image的属性。
- image_recolor (lv_color_t)：将指定的颜色和图片混合，以防图片和背景的颜色一样。默认值：LV_COLOR_BLACK。
- image_recolor_opa (lv_opa_t)：混合的强度。默认值：LV_OPA_TRANSP (不混合)。
- image_opa (lv_opa_t)：图像的不透明度。默认值：LV_OPA_COVER。
- image_blend_mode (lv_blend_mode_t)：指定混合模式，可取：LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE)。默认值：LV_BLEND_MODE_NORMAL。
#include "../../lv_examples.h"
/**
* Using the image style properties
*/
void lv_ex_style_9(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_border_width(&style, LV_STATE_DEFAULT, 2);
lv_style_set_border_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_bottom(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 10);
lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 10);
lv_style_set_image_recolor(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_image_recolor_opa(&style, LV_STATE_DEFAULT, LV_OPA_50);
#if LV_USE_IMG
/*Create an object with the new style*/
lv_obj_t * obj = lv_img_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_IMG_PART_MAIN, &style);
LV_IMG_DECLARE(img_cogwheel_argb);
lv_img_set_src(obj, &img_cogwheel_argb);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
#endif
}
Transition properties
描述状态变化时的动画的属性。
- transition_time (lv_style_int_t)：过渡的时间。默认值：0.
- transition_delay (lv_style_int_t)：过渡开始的延迟。默认值：0.
- transition_prop_1 (property name)：要过渡的属性。用LV_STYLE_前缀+属性名的组合，如LV_STYLE_BG_COLOR。默认值：0（没有）。
- transition_prop_2 (property name)：同transition_prop_1。默认值：0（没有）。
- transition_prop_3 (property name)：同transition_prop_1。默认值：0（没有）。
- transition_prop_4 (property name)：同transition_prop_1。默认值：0（没有）。
- transition_prop_5 (property name)：同transition_prop_1。默认值：0（没有）。
- transition_prop_6 (property name)：同transition_prop_1。默认值：0（没有）。
- transition_path (lv_anim_path_t)：过渡的动画路径。需要使用static或者全局变量，因仅保存了指针。默认值：lv_anim_path_def（线性路径）。
#include "../../lv_examples.h"
/**
* Using the transitions style properties
*/
void lv_ex_style_10(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Set different background color in pressed state*/
lv_style_set_bg_color(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);
/*Set different transition time in default and pressed state
*fast press, slower revert to default*/
lv_style_set_transition_time(&style, LV_STATE_DEFAULT, 500);
lv_style_set_transition_time(&style, LV_STATE_PRESSED, 200);
/*Small delay to make transition more visible*/
lv_style_set_transition_delay(&style, LV_STATE_DEFAULT, 100);
/*Add `bg_color` to transitioned properties*/
lv_style_set_transition_prop_1(&style, LV_STATE_DEFAULT, LV_STYLE_BG_COLOR);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_OBJ_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
}
Scale properties
刻度元素的辅助属性。刻度有个正常的范围和结束的范围。如其字面意思，结束的范围的意思是刻度结束时的范围，可以是临界值或者不活跃的值。正常的范围是结束的范围之前的范围。两个范围可以有不同的属性。
- scale_grad_color (lv_color_t)：正常区域中，刻度线会渐变成这个颜色。默认值：LV_COLOR_BLACK。
- scale_end_color (lv_color_t)：结束区域中刻度线的颜色。默认值：LV_COLOR_BLACK。
- scale_width (lv_style_int_t)：刻度线的宽度。默认值：LV_DPI / 8。
- scale_border_width (lv_style_int_t)：正常区域中，刻度线外侧边框的宽度。默认值：0。
- scale_end_border_width (lv_style_int_t)：结束区域中，刻度线外侧边框的宽度。默认值：0。
- scale_end_line_width (lv_style_int_t)：结束区域中刻度线的宽度。默认值：0。
#include "../../lv_examples.h"
/**
* Using the scale style properties
*/
void lv_ex_style_11(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
/*Set some paddings*/
lv_style_set_pad_inner(&style, LV_STATE_DEFAULT, 20);
lv_style_set_pad_top(&style, LV_STATE_DEFAULT, 20);
lv_style_set_pad_left(&style, LV_STATE_DEFAULT, 5);
lv_style_set_pad_right(&style, LV_STATE_DEFAULT, 5);
lv_style_set_scale_end_color(&style, LV_STATE_DEFAULT, LV_COLOR_RED);
lv_style_set_line_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_scale_grad_color(&style, LV_STATE_DEFAULT, LV_COLOR_BLUE);
lv_style_set_line_width(&style, LV_STATE_DEFAULT, 2);
lv_style_set_scale_end_line_width(&style, LV_STATE_DEFAULT, 4);
lv_style_set_scale_end_border_width(&style, LV_STATE_DEFAULT, 4);
/*Gauge has a needle but for simplicity its style is not initialized here*/
#if LV_USE_GAUGE
/*Create an object with the new style*/
lv_obj_t * obj = lv_gauge_create(lv_scr_act(), NULL);
lv_obj_add_style(obj, LV_GAUGE_PART_MAIN, &style);
lv_obj_align(obj, NULL, LV_ALIGN_CENTER, 0, 0);
#endif
}
在Widget的文档中，你会看到像“控件具有典型的背景属性”。典型背景属性包括：
- Background
- Border
- Outline
- Shadow
- Pattern
- Value
Themes
Theme是Style的集合。在Object创建的时候总是有一个默认的Theme，它描述了默认的外观，并且可以通过添加Style来修改。
默认的Theme在lv_conf.h中用LV_THEME_来定义。每个Theme都有如下的属性：
- primary color
- secondary color
- small font
- normal font
- subtitle font
- title font
- flags (specific to the given theme)
由每个Theme来决定怎么使用这些属性。
有三个内置的Theme：
- empty：没有添加默认的Style。
- material：现代样式的主题。单色Display的黑白主题。
- template：用于复制以创建自定义主题的简单主题。
Extending themes
内置Theme可以用自定义Theme扩展。要创建自定义Theme，可以选择一个基础Theme。基础Theme的Style会比自定义的Theme先添加。可以链上任意数量的Theme，如material theme -> custom theme -> dark theme。
下面是一个如何基于内置Theme创建自定义Theme的例子。
/*Get the current theme (e.g. material). It will be the base of the custom theme.*/
lv_theme_t * base_theme = lv_theme_get_act();
/*Initialize a custom theme*/
static lv_theme_t custom_theme; /*Declare a theme*/
lv_theme_copy(&custom_theme, base_theme); /*Initialize the custom theme from the base theme*/
lv_theme_set_apply_cb(&custom_theme, custom_apply_cb); /*Set a custom theme apply callback*/
lv_theme_set_base(custom_theme, base_theme); /*Set the base theme of the csutom theme*/
/*Initialize styles for the new theme*/
static lv_style_t style1;
lv_style_init(&style1);
lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, custom_theme.color_primary);
...
/*Add a custom apply callback*/
static void custom_apply_cb(lv_theme_t * th, lv_obj_t * obj, lv_theme_style_t name)
{
lv_style_list_t * list;
switch(name) {
case LV_THEME_BTN:
list = lv_obj_get_style_list(obj, LV_BTN_PART_MAIN);
_lv_style_list_add_style(list, &my_style);
break;
}
}
Example
给Button添加Style。
#include "../../lv_examples.h"
/**
* Create styles from scratch for buttons.
*/
void lv_ex_get_started_2(void)
{
static lv_style_t style_btn;
static lv_style_t style_btn_red;
/*Create a simple button style*/
lv_style_init(&style_btn);
lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10);
lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_bg_grad_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_GRAY);
lv_style_set_bg_grad_dir(&style_btn, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);
/*Swap the colors in pressed state*/
lv_style_set_bg_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_GRAY);
lv_style_set_bg_grad_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_SILVER);
/*Add a border*/
lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_border_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_70);
lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 2);
/*Different border color in focused state*/
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED, LV_COLOR_BLUE);
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED | LV_STATE_PRESSED, LV_COLOR_NAVY);
/*Set the text style*/
lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
/*Make the button smaller when pressed*/
lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -5);
lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10);
#if LV_USE_ANIMATION
/*Add a transition to the size change*/
static lv_anim_path_t path;
lv_anim_path_init(&path);
lv_anim_path_set_cb(&path, lv_anim_path_overshoot);
lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300);
lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path);
#endif
/*Create a red style. Change only some colors.*/
lv_style_init(&style_btn_red);
lv_style_set_bg_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_RED);
lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_MAROON);
lv_style_set_bg_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_MAROON);
lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_RED);
lv_style_set_text_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_WHITE);
#if LV_USE_BTN
/*Create buttons and use the new styles*/
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*Add a button the current screen*/
lv_obj_set_pos(btn, 10, 10); /*Set its position*/
lv_obj_set_size(btn, 120, 50); /*Set its size*/
lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN); /*Remove the styles coming from the theme*/
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn);
lv_obj_t * label = lv_label_create(btn, NULL); /*Add a label to the button*/
lv_label_set_text(label, "Button"); /*Set the labels text*/
/*Create a new button*/
lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), btn);
lv_obj_set_pos(btn2, 10, 80);
lv_obj_set_size(btn2, 120, 50); /*Set its size*/
lv_obj_reset_style_list(btn2, LV_BTN_PART_MAIN); /*Remove the styles coming from the theme*/
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn);
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn_red); /*Add the red style on top of the current */
lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); /*Add a local style*/
label = lv_label_create(btn2, NULL); /*Add a label to the button*/
lv_label_set_text(label, "Button 2"); /*Set the labels text*/
#endif
}