立即注册 找回密码

微雪课堂

搜索

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

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

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

本节课没有可以运行的代码,只分析样式的属性。
一 什么是样式
样式用于设置对象的外观。样式是一种具有颜色,填充,不透明度,字体等属性的结构,每个对象类型都有一个称为lv_style_t的通用样式类型。
通过设置lv_style_t变量的,并将其分配给对象(lv_obj_set_style),就可以改变对象的外观。
通常来说一个对象会有一个主样式,主要用来描述对象和主要部分的外观,但是某些对象由于是由几个部件组成的,所以会具有多个属性,就比如我们前面学习滑动按钮对象那节的时候我们就设置了四个部件的样式,而像一般简单的对象就不会有这么多。
二 如何设置对象样式
不知道大家在前面的控件对象学习的时候还记不记得我们是如何设置控件的样式的,这里来给大家总结一下,其实我们可以使用下面的函数去设置所有控件的样式:
void lv_obj_set_style(lv_obj_t *obj, const lv_style_t *style)
但是这在某些时候设置控件的某些样式是不起作用的,所以我给大家整理了一下每个控件单独的API,当然大家可以自己再去回顾一下前面的课程:
void lv_arc_set_style(lv_obj_t *arc, lv_arc_style_ttype, const lv_style_t *style)
void lv_bar_set_style(lv_obj_t *bar, lv_bar_style_ttype, const lv_style_t *style)
void lv_btn_set_style(lv_obj_t *btn, lv_btn_style_ttype, const lv_style_t *style)
void lv_btnm_set_style(lv_obj_t *btnm, lv_btnm_style_ttype, const lv_style_t *style)
void lv_calendar_set_style(lv_obj_t *calendar, lv_calendar_style_ttype, const lv_style_t *style)
void lv_canvas_set_style(lv_obj_t *canvas, lv_canvas_style_ttype, const lv_style_t *style)
void lv_cb_set_style(lv_obj_t *cb, lv_cb_style_ttype, const lv_style_t *style)
static void lv_chart_set_style(lv_obj_t *chart, lv_chart_style_ttype, const lv_style_t *style)
static void lv_cont_set_style(lv_obj_t *cont, lv_cont_style_ttype, const lv_style_t *style)
void lv_ddlist_set_style(lv_obj_t *ddlist, lv_ddlist_style_ttype, const lv_style_t *style)
static void lv_gauge_set_style(lv_obj_t *gauge, lv_gauge_style_ttype, lv_style_t *style)
static void lv_img_set_style(lv_obj_t *img, lv_img_style_ttype, const lv_style_t *style)
void lv_imgbtn_set_style(lv_obj_t *imgbtn, lv_imgbtn_style_ttype, const lv_style_t *style)
void lv_kb_set_style(lv_obj_t *kb, lv_kb_style_ttype, const lv_style_t *style)
static void lv_label_set_style(lv_obj_t *label, lv_label_style_ttype, const lv_style_t *style)
static void lv_led_set_style(lv_obj_t *led, lv_led_style_ttype, const lv_style_t *style)
static void lv_line_set_style(lv_obj_t *line, lv_line_style_ttype, const lv_style_t *style)
void lv_list_set_style(lv_obj_t *list, lv_list_style_ttype, const lv_style_t *style)
static void lv_lmeter_set_style(lv_obj_t *lmeter, lv_lmeter_style_ttype, lv_style_t *style)
void lv_mbox_set_style(lv_obj_t *mbox, lv_mbox_style_ttype, const lv_style_t *style)
void lv_page_set_style(lv_obj_t *page, lv_page_style_ttype, const lv_style_t *style)
void lv_preload_set_style(lv_obj_t *preload, lv_preload_style_ttype, const lv_style_t *style)
void lv_roller_set_style(lv_obj_t *roller, lv_roller_style_ttype, const lv_style_t *style)
void lv_slider_set_style(lv_obj_t *slider, lv_slider_style_ttype, const lv_style_t *style)
static void lv_spinbox_set_style(lv_obj_t *spinbox, lv_spinbox_style_ttype, lv_style_t *style)
void lv_sw_set_style(lv_obj_t *sw, lv_sw_style_ttype, const lv_style_t *style)
void lv_table_set_style(lv_obj_t *table, lv_table_style_ttype, const lv_style_t *style)
void lv_tabview_set_style(lv_obj_t *tabview, lv_tabview_style_ttype, const lv_style_t *style)
void lv_ta_set_style(lv_obj_t *ta, lv_ta_style_ttype, const lv_style_t *style)
void lv_tileview_set_style(lv_obj_t *tileview, lv_tileview_style_ttype, const lv_style_t *style)
void lv_win_set_style(lv_obj_t *win, lv_win_style_ttype, const lv_style_t *style)
大概一共有这么多,这里与lv_obj_set_style不同的是每个函数都多了一个参数,这样可以让我们针对每个控件设置的更能具体到哪一个元素,还是比如我们前面学习滑动按钮那节,我们就是像下面那样使用的:
    lv_sw_set_style(sw1, LV_SW_STYLE_BG, &bg_style);
    lv_sw_set_style(sw1, LV_SW_STYLE_INDIC, &indic_style);
    lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_ON, &knob_on_style);
    lv_sw_set_style(sw1, LV_SW_STYLE_KNOB_OFF, &knob_off_style);
虽然我们都是针对sw1这个对象设置样式,但是我们第二个参数都是不同的,所以推荐大家使用每个控件的样式设置API函数。
三 样式都有哪些属性
要想知道样式都有哪些属性,我觉得还是通过看代码了解的更快一点,所以给大家贴一下样式结构体,大家也可以自己去源码中看一下:
/**
 * Objects in LittlevGL can be assigned a style - which holds information about
 * how the object should be drawn.
 * 
 * This allows for easy customization without having to modify the object's design
 * function.
 */
typedef struct
{
    uint8_t glass : 1; /**< 1: Do not inherit this style*/

    /** Object background. */
    struct
    {
        lv_color_t main_color; /**< Object's main background color. */
        lv_color_t grad_color; /**< Second color. If not equal to `main_color` a gradient will be drawn for the background. */
        lv_coord_t radius; /**< Object's corner radius. You can use #LV_RADIUS_CIRCLE if you want to draw a circle. */
        lv_opa_t opa; /**< Object's opacity (0-255). */

        struct
        {
            lv_color_t color; /**< Border color */
            lv_coord_t width; /**< Border width */
            lv_border_part_t part; /**< Which borders to draw */
            lv_opa_t opa; /**< Border opacity. */
        } border;

        
        struct
        {
            lv_color_t color;
            lv_coord_t width;
            lv_shadow_type_t type; /**< Which parts of the shadow to draw */
        } shadow;

        struct
        {
            lv_coord_t top;
            lv_coord_t bottom;
            lv_coord_t left;
            lv_coord_t right;
            lv_coord_t inner;
        } padding;
    } body;

    /** Style for text drawn by this object. */
    struct
    {
        lv_color_t color; /**< Text color */
        lv_color_t sel_color; /**< Text selection background color. */
        const lv_font_t * font;
        lv_coord_t letter_space; /**< Space between letters */
        lv_coord_t line_space; /**< Space between lines (vertical) */
        lv_opa_t opa; /**< Text opacity */
    } text;

    /**< Style of images. */
    struct
    {
        lv_color_t color; /**< Color to recolor the image with */
        lv_opa_t intense; /**< Opacity of recoloring (0 means no recoloring) */
        lv_opa_t opa; /**< Opacity of whole image */
    } image;

    /**< Style of lines (not borders). */
    struct
    {
        lv_color_t color;
        lv_coord_t width;
        lv_opa_t opa;
        uint8_t rounded : 1; /**< 1: rounded line endings*/
    } line;

#if LV_USE_DEBUG
#if LV_USE_ASSERT_STYLE
    uint32_t debug_sentinel; /**
我们通过查看代码可以看出一共分了四大部分,分别是背景属性、文本属性、图片属性、线条属性,是的,这些不同的属性共同来完成一个样式。这里我给大家简单分析一下,首先是背景属性结构体,结构体名称为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种预设样式,大家可以通过下面一个图片来看一下都有哪些不同:

下面把这些样式的名称贴出来,方便大家复制使用:
lv_style_t lv_style_scr;
lv_style_t lv_style_transp;
lv_style_t lv_style_transp_fit;
lv_style_t lv_style_transp_tight;
lv_style_t lv_style_plain;
lv_style_t lv_style_plain_color;
lv_style_t lv_style_pretty;
lv_style_t lv_style_pretty_color;
lv_style_t lv_style_btn_rel;
lv_style_t lv_style_btn_pr;
lv_style_t lv_style_btn_tgl_rel;
lv_style_t lv_style_btn_tgl_pr;
lv_style_t lv_style_btn_ina;
五 如何创建一个新样式
是的,就像上面说的,我们都是通过复制一个预设样式然后去修改,这样的做的目的其实主要是为了确保所有的属性都已经被设置,虽然有些属性可能用不到,但是如果没有被赋值可能会出现意想不到的效果,所以建议大家自己创建一个新的样式的时候,也是用我们前面的常用的那种方式去先复制一个已经存在的,像下面一样:
static lv_style_t my_red_style;
lv_style_copy(&my_red_style, &lv_style_plain);
my_red_style.body.main_color = LV_COLOR_RED;
my_red_style.body.grad_color = LV_COLOR_RED;
OK,本节课就到这里,对于样式还是需要大家多多去使用,才能更好的理解与运用!

52

顶一下

刚表态过的朋友 (52 人)

关键词树莓派 littleVGL

相关阅读

发表评论

最新评论

引用 imliubo 2020-1-2 08:44
yunjie167: 有一些错别字: 大姐->大家 空间->控件
感谢提醒,已更正。欢迎有问题随时提出!
引用 yunjie167 2019-12-27 16:35
有一些错别字:
大姐->大家
空间->控件

查看全部评论(2)

基础入门
OpenCV
littleGL

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2020-8-11 15:20 , Processed in 0.021193 second(s), 19 queries .