树莓派littlevGL系列教程：样式都有哪些属性

2019-12-26 20:53| 发布者: imliubo| 查看: 10019| 评论: 2|原作者: IAMLIUBO

摘要: Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在前面已经学了三十多个控件了，其中我们也多次谈到对象的样式，以及很多次的分析每个对象的样式，但是肯定还有很多小伙伴没有很搞懂样式，没关系，本节课程就带大 ...

Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在前面已经学了三十多个控件了，其中我们也多次谈到对象的样式，以及很多次的分析每个对象的样式，但是肯定还有很多小伙伴没有很搞懂样式，没关系，本节课程就带大家来分析一下！

本节课没有可以运行的代码，只分析样式的属性。

一 什么是样式
样式用于设置对象的外观。样式是一种具有颜色，填充，不透明度，字体等属性的结构，每个对象类型都有一个称为lv_style_t的通用样式类型。
通过设置lv_style_t变量的，并将其分配给对象(lv_obj_set_style)，就可以改变对象的外观。
通常来说一个对象会有一个主样式，主要用来描述对象和主要部分的外观，但是某些对象由于是由几个部件组成的，所以会具有多个属性，就比如我们前面学习滑动按钮对象那节的时候我们就设置了四个部件的样式，而像一般简单的对象就不会有这么多。
二 如何设置对象样式
不知道大家在前面的控件对象学习的时候还记不记得我们是如何设置控件的样式的，这里来给大家总结一下，其实我们可以使用下面的函数去设置所有控件的样式：
view source
print?
1void lv_obj_set_style(lv_obj_t *obj, const lv_style_t *style)
 但是这在某些时候设置控件的某些样式是不起作用的，所以我给大家整理了一下每个控件单独的API，当然大家可以自己再去回顾一下前面的课程：
view source
print?
01void lv_arc_set_style(lv_obj_t *arc, lv_arc_style_ttype, const lv_style_t *style)
02void lv_bar_set_style(lv_obj_t *bar, lv_bar_style_ttype, const lv_style_t *style)
03void lv_btn_set_style(lv_obj_t *btn, lv_btn_style_ttype, const lv_style_t *style)
04void lv_btnm_set_style(lv_obj_t *btnm, lv_btnm_style_ttype, const lv_style_t *style)
05void lv_calendar_set_style(lv_obj_t *calendar, lv_calendar_style_ttype, const lv_style_t *style)
06void lv_canvas_set_style(lv_obj_t *canvas, lv_canvas_style_ttype, const lv_style_t *style)
07void lv_cb_set_style(lv_obj_t *cb, lv_cb_style_ttype, const lv_style_t *style)
08static void lv_chart_set_style(lv_obj_t *chart, lv_chart_style_ttype, const lv_style_t *style)
09static void lv_cont_set_style(lv_obj_t *cont, lv_cont_style_ttype, const lv_style_t *style)
10void lv_ddlist_set_style(lv_obj_t *ddlist, lv_ddlist_style_ttype, const lv_style_t *style)
11static void lv_gauge_set_style(lv_obj_t *gauge, lv_gauge_style_ttype, lv_style_t *style)
12static void lv_img_set_style(lv_obj_t *img, lv_img_style_ttype, const lv_style_t *style)
13void lv_imgbtn_set_style(lv_obj_t *imgbtn, lv_imgbtn_style_ttype, const lv_style_t *style)
14void lv_kb_set_style(lv_obj_t *kb, lv_kb_style_ttype, const lv_style_t *style)
15static void lv_label_set_style(lv_obj_t *label, lv_label_style_ttype, const lv_style_t *style)
16static void lv_led_set_style(lv_obj_t *led, lv_led_style_ttype, const lv_style_t *style)
17static void lv_line_set_style(lv_obj_t *line, lv_line_style_ttype, const lv_style_t *style)
18void lv_list_set_style(lv_obj_t *list, lv_list_style_ttype, const lv_style_t *style)
19static void lv_lmeter_set_style(lv_obj_t *lmeter, lv_lmeter_style_ttype, lv_style_t *style)
20void lv_mbox_set_style(lv_obj_t *mbox, lv_mbox_style_ttype, const lv_style_t *style)
21void lv_page_set_style(lv_obj_t *page, lv_page_style_ttype, const lv_style_t *style)
22void lv_preload_set_style(lv_obj_t *preload, lv_preload_style_ttype, const lv_style_t *style)
23void lv_roller_set_style(lv_obj_t *roller, lv_roller_style_ttype, const lv_style_t *style)
24void lv_slider_set_style(lv_obj_t *slider, lv_slider_style_ttype, const lv_style_t *style)
25static void lv_spinbox_set_style(lv_obj_t *spinbox, lv_spinbox_style_ttype, lv_style_t *style)
26void lv_sw_set_style(lv_obj_t *sw, lv_sw_style_ttype, const lv_style_t *style)
27void lv_table_set_style(lv_obj_t *table, lv_table_style_ttype, const lv_style_t *style)
28void lv_tabview_set_style(lv_obj_t *tabview, lv_tabview_style_ttype, const lv_style_t *style)
29void lv_ta_set_style(lv_obj_t *ta, lv_ta_style_ttype, const lv_style_t *style)
30void lv_tileview_set_style(lv_obj_t *tileview, lv_tileview_style_ttype, const lv_style_t *style)
31void lv_win_set_style(lv_obj_t *win, lv_win_style_ttype, const lv_style_t *style)
 大概一共有这么多，这里与lv_obj_set_style不同的是每个函数都多了一个参数，这样可以让我们针对每个控件设置的更能具体到哪一个元素，还是比如我们前面学习滑动按钮那节，我们就是像下面那样使用的：
view source
print?
1lv_sw_set_style(sw1, LV_SW_STYLE_BG, &bg_style);
2lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &indic_style);
3lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &knob_on_style);
4lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &knob_off_style);
 虽然我们都是针对sw1这个对象设置样式，但是我们第二个参数都是不同的，所以推荐大家使用每个控件的样式设置API函数。
三 样式都有哪些属性
要想知道样式都有哪些属性，我觉得还是通过看代码了解的更快一点，所以给大家贴一下样式结构体，大家也可以自己去源码中看一下：
view source
print?
01/**
02 * Objects in LittlevGL can be assigned a style - which holds information about
03 * how the object should be drawn.
04 * 
05 * This allows for easy customization without having to modify the object's design
06 * function.
07 */
08typedef struct
09{
10    uint8_t glass : 1; /**< 1: Do not inherit this style*/
11 
12    /** Object background. */
13    struct
14    {
15        lv_color_t main_color; /**< Object's main background color. */
16        lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. */
17        lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. */
18        lv_opa_t opa; /**< Object's opacity (0-255). */
19 
20        struct
21        {
22            lv_color_t color; /**< Border color */
23            lv_coord_t width; /**< Border width */
24            lv_border_part_t part; /**< Which borders to draw */
25            lv_opa_t opa; /**< Border opacity. */
26        } border;
27 
28         
29        struct
30        {
31            lv_color_t color;
32            lv_coord_t width;
33            lv_shadow_type_t type; /**< Which parts of the shadow to draw */
34        } shadow;
35 
36        struct
37        {
38            lv_coord_t top;
39            lv_coord_t bottom;
40            lv_coord_t left;
41            lv_coord_t right;
42            lv_coord_t inner;
43        } padding;
44    } body;
45 
46    /** Style for text drawn by this object. */
47    struct
48    {
49        lv_color_t color; /**< Text color */
50        lv_color_t sel_color; /**< Text selection background color. */
51        const lv_font_t * font;
52        lv_coord_t letter_space; /**< Space between letters */
53        lv_coord_t line_space; /**< Space between lines (vertical) */
54        lv_opa_t opa; /**< Text opacity */
55    } text;
56 
57    /**< Style of images. */
58    struct
59    {
60        lv_color_t color; /**< Color to recolor the image with */
61        lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */
62        lv_opa_t opa; /**< Opacity of whole image */
63    } image;
64 
65    /**< Style of lines (not borders). */
66    struct
67    {
68        lv_color_t color;
69        lv_coord_t width;
70        lv_opa_t opa;
71        uint8_t rounded : 1; /**< 1: rounded line endings*/
72    } line;
73 
74#if LV_USE_DEBUG
75#if LV_USE_ASSERT_STYLE
76    uint32_t debug_sentinel; /**<should `lv_style_degug_sentinel_value`="" to="" indicate="" that="" the="" style="" is="" valid*="" #endif="" }="" lv_style_t;<="" pre=""></should>
 我们通过查看代码可以看出一共分了四大部分，分别是背景属性、文本属性、图片属性、线条属性，是的，这些不同的属性共同来完成一个样式。这里我给大家简单分析一下，首先是背景属性结构体，结构体名称为body，相信大家也能领会到这个单词的含义，因为这里就是描述的对象的主体样式：
body.main_color  主色（顶部颜色）
body.grad_color   渐变色（底色）
body.radius   角半径（设置LV_RADIUS_CIRCLE为绘制圆圈）
body.opa      不透明度（0..255 或 LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20 … LV_OPA_COVER）
body.border.color  边框颜色
body.border.width  边框宽度
body.border.part  边框部分（LV_BORDER_LEFT / RIGHT / TOP / BOTTOM / FULL）
body.border.opa  边框不透明度（0..255 或 LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20 … LV_OPA_COVER）
body.shadow.color  阴影颜色
body.shadow.width  阴影宽度
body.shadow.type   阴影类型（LV_SHADOW_BOTTOM / FULL）
body.padding.top    顶部填充
body.padding.bottom  底部填充
body.padding.left  左填充
body.padding.right  右填充
body.padding.inner  内部填充（在内容元素或子元素之间）
然后是文本属性，我们在汉字显示一节，也有使用，大家也可以回过头去看看：
text.color  文字颜色
text.sel_color  选定的文字颜色
text.font  指向字体的指针
text.opa  文本不透明度（0..255或LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20…LV_OPA_COVER ）
text.letter_space  字母空间
text.line_space  行空间
然后是图片属性：
image.color  用于根据其像素的亮度重新着色的颜色
image.intense  重新着色强度（0..255或LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20 … LV_OPA_COVER）
image.opa  整体图像不透明度（0..255或LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20 … LV_OPA_COVER）
最后是线条属性：
line.color  线色
line.width  线宽
line.opa  线的不透明度（0..255或LV_OPA_TRANSP，LV_OPA_10，LV_OPA_20 … LV_OPA_COVER）
这就是所有的属性了，当然有些时候这个属性都是灵活运用的，具体对应控件的哪些属性，还需要大家去查看一下控件的源码去分析，或者自己通过修改样式的属性去不断的测试并记录。
四 内部样式 
我们在前面的课程学习的时候都是通过复制一个样式，然后来修改部分的属性来达到我们想要的效果，没错我们复制的那个样式就是一些自带的样式，或者叫做预设样式，大概有13种预设样式，大家可以通过下面一个图片来看一下都有哪些不同：
下面把这些样式的名称贴出来，方便大家复制使用：
view source
print?
01lv_style_t lv_style_scr;
02lv_style_t lv_style_transp;
03lv_style_t lv_style_transp_fit;
04lv_style_t lv_style_transp_tight;
05lv_style_t lv_style_plain;
06lv_style_t lv_style_plain_color;
07lv_style_t lv_style_pretty;
08lv_style_t lv_style_pretty_color;
09lv_style_t lv_style_btn_rel;
10lv_style_t lv_style_btn_pr;
11lv_style_t lv_style_btn_tgl_rel;
12lv_style_t lv_style_btn_tgl_pr;
13lv_style_t lv_style_btn_ina;
五 如何创建一个新样式
是的，就像上面说的，我们都是通过复制一个预设样式然后去修改，这样的做的目的其实主要是为了确保所有的属性都已经被设置，虽然有些属性可能用不到，但是如果没有被赋值可能会出现意想不到的效果，所以建议大家自己创建一个新的样式的时候，也是用我们前面的常用的那种方式去先复制一个已经存在的，像下面一样：
view source
print?
1static lv_style_t my_red_style;
2lv_style_copy(&my_red_style, &lv_style_plain);
3my_red_style.body.main_color = LV_COLOR_RED;
4my_red_style.body.grad_color = LV_COLOR_RED;
 OK，本节课就到这里，对于样式还是需要大家多多去使用，才能更好的理解与运用！
﻿


329

顶一下





刚表态过的朋友 (329 人)


收藏
邀请

上一篇：树莓派littlevGL系列教程：任务系统

树莓派littlevGL系列教程：样式都有哪些属性

刚表态过的朋友 (329 人)

相关阅读

最新评论