RT-Thread-LVGL例程学习——stylesRT-Thread问答社区

LVGL例程学习——styles

发布于 2022-06-25 21:20:42 浏览：1532 订阅该版

按照官网学习顺序，接下来学一下LVGL的styles。
- 先看`lv_example_style_1()`。代码如下，稍做了修改：

```C
void lv_example_style_1(void)
{
     static lv_style_t style;
     lv_style_init(&style);
     lv_style_set_radius(&style, 10);
     lv_style_set_text_font(&style, &lv_font_montserrat_48);

/*Make a gradient*/
     lv_style_set_width(&style, LV_SIZE_CONTENT);
     lv_style_set_height(&style, LV_SIZE_CONTENT);

lv_style_set_pad_ver(&style, 50);      
     lv_style_set_pad_left(&style, 50);

lv_style_set_x(&style, lv_pct(20));
     lv_style_set_y(&style, lv_pct(40));

/*Create an object with the new style*/
     lv_obj_t * obj = lv_obj_create(lv_scr_act());
     lv_obj_add_style(obj, &style, 0);

lv_obj_t * label = lv_label_create(obj);
     lv_label_set_text_fmt(label, "Hello style test %d", lv_pct(100));
}
```
演示效果如下：
![styles1.png](https://oss-club.rt-thread.org/uploads/20220624/6086b6b9ed5daa8142faa9c20567a25f.png.webp "styles1.png")
学习点：
1. `LV_SIZE_CONTENT`宏的用法。在设置控件大小的时候，可以用此宏，让LVGL自己选定正好包容里面内容的大小尺寸。
2. `lv_style_set_pad_xxx()`可以设定控件内部某方位的边缘宽度。
3. `lv_pct()`用于转换一个百分比到具体数值。代码给定的范围是0~1000.宏展开后为`(x < 0 ? ((1000 - (x)) | (1 << (13U))) : ((x) | (1 << (13U))))`。所以我上面代码中打印的`lv_pct(100)`值为8292（100 | 8192）。感觉看这个值没什么意义，`1 << 13U`应该只是一个标志位。具体的值要到具体的函数里面才会转换。但从代码测试结果看，设定x的时候，是按照屏幕水平宽度计算的百分比值。而设定y的时候，是按照屏幕的垂直高度计算的百分比值。内部会自动区分。
- 接下来学习`lv_example_style_2()`。代码如下，稍做了修改：

```C
void lv_example_style_2(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);

/*Make a gradient*/
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_VER;
    grad.stops_count = 3;
    grad.stops[0].color = lv_palette_lighten(LV_PALETTE_GREY, 1);
    grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
    grad.stops[2].color = lv_palette_main(LV_PALETTE_RED);

/*Shift the gradient to the bottom*/
    grad.stops[0].frac  = 128;
    grad.stops[1].frac  = 192;
    grad.stops[2].frac  = 220;

lv_style_set_bg_grad(&style, &grad);
    lv_style_set_size(&style, lv_pct(50));

/*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}
```
演示效果如下：
![styles2.png](https://oss-club.rt-thread.org/uploads/20220624/24842dd8f5227d0c7a4c9ddc43fd2d99.png.webp "styles2.png")
学习点：
1. 渐变grad的使用。这里设定了3个渐变色。渐变转换位置是通过grad.stops[n].frac参数控制，范围是“0~255”。也是一个相对于底部的百分比位置。另外默认的stops最大数量宏`LV_GRADIENT_MAX_STOPS`值为2.要想设定大于2的渐变色，要先修改一下这个宏。
2. 再次验证了一下`lv_pct()`函数的用法。内部会自动判别水平和垂直尺寸。
- 再来看下一个例程`lv_example_style_3()`.原始例程没什么好说的，主要演示了一下如何只对控件某方位加一个边。自己又给加了一个grad属性，还试图给一个label添加grad，实现渐变色的文字。但没能实现。倒是可以给Label的背景色添加grad.
```C
void lv_example_style_3(void)
{
    static lv_style_t style, grad_style;
    lv_style_init(&style);

/*Set a background color and a radius*/
    lv_style_set_radius(&style, 10);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_ORANGE, 1));

static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_HOR;
    grad.stops_count = 2;
    grad.stops[0].color = lv_palette_user(LV_PALETTE_GREEN);
    grad.stops[1].color = lv_palette_user(LV_PALETTE_YELLOW);
    grad.stops[0].frac = 80;
    grad.stops[1].frac = 160;
    lv_style_set_bg_grad(&grad_style, &grad);
    lv_style_set_text_color(&grad_style, lv_palette_user(LV_PALETTE_BLUE));
//    lv_style_set_bg_opa(&grad_style, LV_OPA_COVER);

static lv_text_decor_t decor;
    lv_style_set_text_decor(&grad_style, LV_TEXT_DECOR_UNDERLINE);

/*Add border to the bottom+right*/
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_border_width(&style, 10);
    lv_style_set_border_opa(&style, LV_OPA_50);
    lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);

lv_style_set_size(&style, lv_pct(50));

/*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_add_style(obj, &grad_style, 0);
    lv_obj_center(obj);

lv_obj_t *label = lv_label_create(obj);
    lv_label_set_text(label, "label test text.");
    lv_obj_center(label);
    lv_obj_add_style(label, &grad_style,LV_STYLE_PROP_INV);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
}
```
演示效果如下：
![styles3.png](https://oss-club.rt-thread.org/uploads/20220625/fe450acd327614e3f80af49bd8716b54.png.webp "styles3.png")
学习点：
1, 给控件添加border.
2, 有个自己写代码才注意到的小细节。声明的style等结构变量，必须是全局的或者静态的。或者程序不会退出。也就是要保存变量一直存在，不会被释放。因为向obj里面添加style等属性的时候，只是添加了指针。
3，还有一个小细节。在想label内text添加grad无果后，就想试一下给label的背景色添加grad。发现添加上也无反应。是因为默认的label的背景色都是透明的（也应当如此）。想让自己添加的bg_grad有效果。必须修改opa属性，显示背景色。
- 再来看`lv_example_style_4()`的例子。这个例子主要演示了一下给控件添加外边框。代码如下：
```C
void lv_example_style_4(void)
{
    static lv_style_t style;
    lv_style_init(&style);

/*Set a background color and a radius*/
    lv_style_set_radius(&style, 20);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

/*Add outline*/
    lv_style_set_outline_width(&style, 4);
    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_outline_pad(&style, 18);

/*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
    lv_obj_set_size(obj, LV_HOR_RES/2, LV_VER_RES/2);
}
```
演示效果如下：
![styles4.png](https://oss-club.rt-thread.org/uploads/20220625/016d2253581680e3b9c870e620b15032.png.webp "styles4.png")
学习点：
1，给控件添加外边框。以及修改边框宽度和距控件距离。
2，外边框也会跟着style的radius属性，改变圆角大小。
- 看下一个例程`lv_example_style_5()`。此例程是演示控件shadow的。顺便又复习了一下边框。看了一下边框和阴影的叠加效果。
```C
void lv_example_style_5(void)
{
    static lv_style_t style;
    lv_style_init(&style);

/*Set a background color and a radius*/
    lv_style_set_radius(&style, 20);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

lv_style_set_size(&style, lv_pct(50));

/*Add a shadow*/
    lv_style_set_shadow_width(&style, 100);
    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_shadow_ofs_x(&style, 10);
    lv_style_set_shadow_ofs_y(&style, 20);

lv_style_set_outline_width(&style, 10);
    lv_style_set_outline_color(&style, lv_palette_user(LV_PALETTE_RED));
    lv_style_set_outline_pad(&style, 60);

/*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}
```
演示效果如下：
![styles5.png](https://oss-club.rt-thread.org/uploads/20220625/e43f243b265b19cbd70f5ca1dd56bb2a.png.webp "styles5.png")
学习点：
1，为控件添加shadow，并设置阴影的宽度，颜色以及偏移等属性。
2，shadow的圆角也可以自动根据style的radius属性自动改变。
- 接下来看`lv_example_style_6()`的例程。此例程是演示如何在控件上显示图片。不过图片是取模，直接存到代码里的。后面从文件系统内导入图片的时候再看具体格式如何对接。
```C
void lv_example_style_6(void)
{
    static lv_style_t style, img_style;
    lv_style_init(&style);

/*Set a background color and a radius*/
    lv_style_set_radius(&style, 20);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
    lv_style_set_border_width(&style, 10);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));

lv_style_set_img_recolor(&img_style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_img_recolor_opa(&img_style, LV_OPA_50);
    lv_style_set_transform_angle(&img_style, 200);
//    lv_style_set_transform_zoom(&img_style, 400);

/*Create an object with the new style*/
    lv_obj_t * obj = lv_img_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_add_style(obj, &img_style, 0);

LV_IMG_DECLARE(animimg001);
    lv_img_set_src(obj, &animimg001);

lv_obj_center(obj);
}
```
演示效果如下：
![styles6.png](https://oss-club.rt-thread.org/uploads/20220625/2ca3f50c49115be1d2b7096386cc4928.png.webp "styles6.png")
学习点：
1，如何在控件上显示图片。
2，如何更改图片的角度，和放缩图片。
3，但有一个问题，我暂时没能解决。如果设置了放大图片的话，原本style里面设置的边框就会被覆盖掉。分开两个style效果也一样。
- 接下来看`lv_example_style_7()`的例程。此例程演示了圆弧控件和圆弧的style。但有意思的是，圆弧控件自带滑块，感觉就是一个圆弧型的slider。既然它可以滑动，我就把这个滑块的值读出来显示了一下。代码如下：

```C
lv_obj_t *label;
void test_event_cb(lv_event_t *e)
{
    lv_obj_t *obj = lv_event_get_target(e);

int16_t val = lv_arc_get_value(obj);
    rt_kprintf("%d\r\n", val);
    lv_label_set_text_fmt(label, "%d", val);
}

void lv_example_style_7(void)
{
    static lv_style_t style;
    lv_style_init(&style);

lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_arc_width(&style, 8);

lv_style_set_size(&style, 400);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));

/*Create an object with the new style*/
    lv_obj_t * obj = lv_arc_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);

lv_arc_set_bg_angles(obj, 180, 360);
    lv_arc_set_range(obj, -100, 100);
    lv_arc_set_value(obj, 10);
    label = lv_label_create(obj);
    lv_obj_center(label);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
    lv_obj_set_style_text_color(label, lv_palette_user(LV_PALETTE_BLUE), 0);
    lv_label_set_text_fmt(label, "10");
    lv_obj_set_style_text_decor(label, LV_TEXT_DECOR_UNDERLINE, 0);

lv_obj_add_event_cb(obj, test_event_cb, LV_EVENT_PRESSING, NULL);
}
```
演示效果如下：
![styles7.png](https://oss-club.rt-thread.org/uploads/20220625/4a52611e1ef9b39806144bb50ff9f7c4.png.webp "styles7.png")
学习点：
1，arc控件的使用，以及属性的设置。
2，设置angles，要用`lv_arc_set_bg_angles()`函数接口，不是`lv_arc_set_angles()`接口。这个函数接口是设置什么的，暂时没过多研究。
- `lv_example_style_8()`的例程，主要演示了一下label相关的style设置。包括背景色，字体颜色，字母间距，行间距等。

```C
void lv_example_style_8(void)
{
    static lv_style_t style;
    lv_style_init(&style);

lv_style_set_radius(&style, 20);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
    lv_style_set_border_width(&style, 5);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_pad_all(&style, 50);

lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_text_letter_space(&style, 5);
    lv_style_set_text_line_space(&style, 20);
    lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);

lv_style_set_text_font(&style, &lv_font_montserrat_48);

/*Create an object with the new style*/
    lv_obj_t * obj = lv_label_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_label_set_text(obj, "Text of\n"
                            "a label");
    lv_obj_center(obj);
}
```
演示效果如下：
![styles8.png](https://oss-club.rt-thread.org/uploads/20220625/8924e8651e1b94d441ed661202fcefc2.png.webp "styles8.png")
学习点：
1，label相关的属性设置。
- `lv_example_style_9()`例程演示的是画线功能。涉及到了line的结构类型，以及相关style。

```C
void lv_example_style_9(void)
{
    static lv_style_t style;
    lv_style_init(&style);

lv_style_set_line_color(&style, lv_palette_user(LV_PALETTE_BLUE));
    lv_style_set_line_width(&style, 10);
    lv_style_set_line_rounded(&style, true);

/*Create an object with the new style*/
    lv_obj_t * obj = lv_line_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);

static lv_point_t p[] = {{0, 150}, {200, 300}, {600, 0}};
    lv_line_set_points(obj, p, 3);

lv_obj_center(obj);
}
```
演示效果如下：
![styles9.png](https://oss-club.rt-thread.org/uploads/20220625/2c1b8d83064eb70e8760c5832394e3ae.png.webp "styles9.png")
学习点：
1，line结构的使用及相关style设置。
2，rounded属性设置为true可以使图形画的更丰满，终点以圆弧填充。
3，线段定点数组要保持不被释放，否则绘制失败。
- `lv_example_style_10()`函数演示了LVGL的动画特效。LVGL的提供的动画有7种，包括线性，擦入，擦出，擦入擦出，过渡变化，弹跳和分步。但通过测试，发现，还是不要设置的动画太复杂，否则动画渲染需要的计算量太大，CPU吃不消😊。测试中，在原有例程的基础上，加上了shadow和size属性，效果就很卡了，CPU占用率直接飙到99%。

```C
void lv_example_style_10(void)
{
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, LV_STYLE_SHADOW_COLOR, \
            LV_STYLE_SHADOW_WIDTH, LV_STYLE_WIDTH, LV_STYLE_HEIGHT, 0};

/* A default transition
     * Make it fast (100ms) and start with some delay (200 ms)*/
    static lv_style_transition_dsc_t trans_def;
    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_ease_in, 100, 400, NULL);

/* A special transition when going to pressed state
     * Make it slow (500 ms) but start  without delay*/
    static lv_style_transition_dsc_t trans_pr;
    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_ease_out, 1000, 0, NULL);

static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &trans_def);

static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_border_width(&style_pr, 6);
    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
    lv_style_set_transition(&style_pr, &trans_pr);

lv_style_set_shadow_color(&style_pr, lv_palette_user(LV_PALETTE_BLUE));
    lv_style_set_shadow_width(&style_pr, 500);
    lv_style_set_width(&style_pr, 300);
    lv_style_set_height(&style_pr, 300);

/*Create an object with the new style_pr*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style_def, 0);
    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);

lv_obj_center(obj);
}
```
演示效果如下：
![styles10.png](https://oss-club.rt-thread.org/uploads/20220625/8cc23a3cbd4add2b06b5a05dc52a43bb.png.webp "styles10.png")
学习点：
1，如何为控件添加动画效果。
- `lv_example_style_11()`例程，主要演示了多重style叠加的效果。其实这个在前面例子的测试中已经玩过了。这个例程中用到的函数接口，之前也基本都用过。

```C
void lv_example_style_11(void)
{
    /*A base style*/
    static lv_style_t style_base;
    lv_style_init(&style_base);
    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
    lv_style_set_border_width(&style_base, 2);
    lv_style_set_radius(&style_base, 10);
    lv_style_set_shadow_width(&style_base, 50);
    lv_style_set_shadow_ofs_y(&style_base, 5);
    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
    lv_style_set_text_color(&style_base, lv_color_white());
    lv_style_set_width(&style_base, LV_SIZE_CONTENT);
    lv_style_set_height(&style_base, LV_SIZE_CONTENT);

lv_style_set_text_font(&style_base, &lv_font_montserrat_48);

/*Set only the properties that should be different*/
    static lv_style_t style_warning;
    lv_style_init(&style_warning);
    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));

/*Create an object with the base style only*/
    lv_obj_t * obj_base = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_base, &style_base, 0);
    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);

lv_obj_t * label = lv_label_create(obj_base);
    lv_label_set_text(label, "Base");
    lv_obj_center(label);

/*Create another object with the base style and earnings style too*/
    lv_obj_t * obj_warning = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_warning, &style_base, 0);
    lv_obj_add_style(obj_warning, &style_warning, 0);
    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);

label = lv_label_create(obj_warning);
    lv_label_set_text(label, "Warning");
    lv_obj_center(label);
}
```
演示效果如下：
![styles11.png](https://oss-club.rt-thread.org/uploads/20220625/3c08da872e4a7147adf920df5b27db46.png.webp "styles11.png")
学习点：
1， 多重style的使用。
2，用`lv_obj_align()`函数接口设定控件的布局是一个不错的选择。比单纯的设置x,y坐标要灵活的多。更像布局器的感觉。
- `lv_example_style_12()`例程比较简单，主要演示了用Local的方式设定style属性。这个在之前的测试中也经常用到。

```C
void lv_example_style_12(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
    lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
    lv_style_set_border_width(&style, 5);
    lv_style_set_size(&style, lv_pct(50));

lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);

/*Overwrite the background color locally*/
    lv_obj_set_style_bg_color(obj,lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);

lv_obj_center(obj);
}
```
演示效果如下：
![styles12.png](https://oss-club.rt-thread.org/uploads/20220625/d3d5e13f0ce9a02ebbbf3ffb9763485e.png.webp "styles12.png")
学习点：
1，用local方式设定style。
2，无论函数调用先后，local方式设定的属性，都会覆盖掉用add_style函数加载的属性。
- `lv_example_style_13()`例程演示了如何为控件的某部分或某个状态添加style。也解决了我之前没解决的问题，就是给滑动条设置前景色。当然“前景色”也是我理解的，因为之前设置背景色，只有滑块未覆盖的地方被设置了。其实在LVGL里面是把slider分成了三个部分：背景，指示器，滑块。在PART的枚举定义中特别举例注释说明了😅。PART的枚举定义及style13的例程代码如下：

```C
/**
 * The possible parts of widgets.
 * The parts can be considered as the internal building block of the widgets.
 * E.g. slider = background + indicator + knob
 * Note every part is used by every widget
 */
enum {
    LV_PART_MAIN         = 0x000000,   /**< A background like rectangle*/
    LV_PART_SCROLLBAR    = 0x010000,   /**< The scrollbar(s)*/
    LV_PART_INDICATOR    = 0x020000,   /**< Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox*/
    LV_PART_KNOB         = 0x030000,   /**< Like handle to grab to adjust the value*/
    LV_PART_SELECTED     = 0x040000,   /**< Indicate the currently selected option or section*/
    LV_PART_ITEMS        = 0x050000,   /**< Used if the widget has multiple similar elements (e.g. table cells)*/
    LV_PART_TICKS        = 0x060000,   /**< Ticks on scale e.g. for a chart or meter*/
    LV_PART_CURSOR       = 0x070000,   /**< Mark a specific place e.g. for text area's cursor or on a chart*/

LV_PART_CUSTOM_FIRST = 0x080000,    /**< Extension point for custom widgets*/

LV_PART_ANY          = 0x0F0000,    /**< Special value can be used in some functions to target all parts*/
};

typedef uint32_t lv_part_t;

void lv_example_style_13(void)
{
    static lv_style_t style_indic;
    lv_style_init(&style_indic);
    lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);

static lv_style_t style_knob;
    lv_style_init(&style_knob);
    static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_HOR;
    grad.stops_count = 1;
    grad.stops[0].color = lv_palette_user(LV_PALETTE_YELLOW);
    lv_style_set_bg_grad(&style_knob, &grad);

static lv_style_t style_indic_pr;
    lv_style_init(&style_indic_pr);
    lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_shadow_width(&style_indic_pr, 10);
    lv_style_set_shadow_spread(&style_indic_pr, 3);

/*Create an object with the new style_pr*/
    lv_obj_t * obj = lv_slider_create(lv_scr_act());
    lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
    lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
    lv_obj_add_style(obj, &style_knob, LV_PART_KNOB);
    lv_slider_set_value(obj, 70, LV_ANIM_OFF);
    lv_obj_center(obj);
    lv_obj_set_style_width(obj, lv_pct(70), 0);
}
```
演示效果如下：
![styles13.png](https://oss-club.rt-thread.org/uploads/20220625/d47f16cf440e40fb519c66afad030658.png.webp "styles13.png")
学习点：
1，用PART和STATE参数，指定为某部分或某状态设置style；
2，其中PART参数是不可以用或运算选择多个部件的。而state是可以用或运算的。

- `lv_example_style_14()`是style的最后一个例程。演示了如何改变主题，以及链接切换主题时候的回调函数。可以在回调函数中，加载适合新主题的style等操作。

```C
static lv_style_t style_btn;

/*Will be called when the styles of the base theme are already added
  to add new styles*/
static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
    LV_UNUSED(th);

if(lv_obj_check_type(obj, &lv_btn_class)) {
        lv_obj_add_style(obj, &style_btn, 0);
    }
}

static void new_theme_init_and_set(void)
{
    /*Initialize the styles*/
    lv_style_init(&style_btn);
    lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
    lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
    lv_style_set_border_width(&style_btn, 3);

/*Initialize the new theme from the current theme*/
    lv_theme_t * th_act = lv_disp_get_theme(NULL);
    static lv_theme_t th_new;
    th_new = *th_act;

/*Set the parent theme and the style apply callback for the new theme*/
    lv_theme_set_parent(&th_new, th_act);
    lv_theme_set_apply_cb(&th_new, new_theme_apply_cb);

/*Assign the new theme to the current display*/
    lv_disp_set_theme(NULL, &th_new);
}

/**
 * Extending the current theme
 */
void lv_example_style_14(void)
{
    lv_obj_t * btn;
    lv_obj_t * label;

btn = lv_btn_create(lv_scr_act());
    lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);

label = lv_label_create(btn);
    lv_label_set_text(label, "Original theme");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
    lv_obj_set_style_size(btn, LV_SIZE_CONTENT, 0);

new_theme_init_and_set();

btn = lv_btn_create(lv_scr_act());
    lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);

label = lv_label_create(btn);
    lv_label_set_text(label, "New theme");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
    lv_obj_set_style_size(btn, LV_SIZE_CONTENT, 0);
}
```
演示效果如下：
![styles14.png](https://oss-club.rt-thread.org/uploads/20220625/74938716cf7066d736457ee32ba4c9e3.png.webp "styles14.png")
学习点：
1，如何切换主题。
2，`lv_disp_get_theme()`和`lv_disp_set_theme()`函数接口，可以直接传入NULL参数，内部会自动调用`lv_disp_get_default()`函数获得默认的display。
- 最后再看一下`lv_example_style_15`的例程。这个例程在新版本中已经删除了，官网的例程中还存在。于是复制过来测试了一下。发现，确实已经不兼容了。`lv_obj_set_style_transform_pivot_x()`和`lv_obj_set_style_transform_pivot_y()`函数已经不存在了，取而代之的应该是`lv_obj_set_style_translate_x()`，和`lv_obj_set_style_translate_y()`。而且，尝试了一下button和label两个控件，设置translate后都没有任何效果。而在button里加入一个image，给image设置translate是可以的。

```C
void lv_example_style_15(void)
{
    lv_obj_t * btn;
    lv_obj_t * label;

/*Normal button*/
    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, -150);

label = lv_label_create(btn);
    lv_label_set_text(label, "Normal");
    lv_obj_center(label);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);

/*Set opacity
     *The button and the label is rendered to a layer first and that layer is blended*/
    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_opa(btn, LV_OPA_50, 0);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);

label = lv_label_create(btn);
    lv_label_set_text(label, "Opa:50%");
    lv_obj_center(label);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);

/*Set transformations
     *The button and the label is rendered to a layer first and that layer is transformed*/
    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
    lv_obj_set_style_transform_angle(btn, 150, 0);        /*15 deg*/
    lv_coord_t zoom = lv_obj_get_style_transform_zoom(btn, 0);
    rt_kprintf("button zoom:%d\r\n", zoom);
    lv_obj_set_style_transform_zoom(btn, zoom * 1.25, 0);   /*1.25x*/
    lv_obj_set_style_translate_x(btn, lv_obj_get_style_x(btn, 0)/2, 0);
    lv_obj_set_style_translate_y(btn, lv_obj_get_style_y(btn, 0)/2, 0);
    lv_obj_set_style_opa(btn, LV_OPA_COVER, 0);
    lv_obj_align(btn, LV_ALIGN_CENTER, 0, 150);

label = lv_label_create(btn);
    lv_label_set_text(label, "Transf.");
    lv_obj_center(label);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);

lv_obj_t *img = lv_img_create(btn);
    lv_obj_center(img);
    LV_IMG_DECLARE(animimg002);
    lv_img_set_src(img, &animimg002);
    lv_obj_set_style_img_recolor(img, lv_palette_user(LV_PALETTE_BLUE), 0);
    lv_obj_set_style_transform_angle(img, 150, 0);
    zoom = lv_obj_get_style_transform_zoom(img, 0);
    rt_kprintf("button zoom:%d\r\n", zoom);
    lv_obj_set_style_transform_zoom(img, zoom / 2, 0);
    lv_obj_set_style_translate_x(img, lv_obj_get_style_x(img, 0)/2, 0);
    lv_obj_set_style_translate_y(img, lv_obj_get_style_y(img, 0)/2, 0);
}
```
演示效果：
![styles15.png](https://oss-club.rt-thread.org/uploads/20220626/1297064bded304427d60cf0823277ea6.png.webp "styles15.png")
学习点：
1，给控件添加transform相关的属性。
2，普通控件貌似已经不支持变换了，image控件可以。
至此，官方的style例程以及全部学习完毕。为了演示效果和加深印象，每个例程都稍微调整了一下。后面进军下一个例程。希望能在比赛结束前多看一些例程。还要留足够时间完成作品😅。