5、LVGL标签和样式

LVGL标签和样式

LVGL标签

标签本身是使用的最多的一个空间，主要作用是用来显示文本信息的.支持换行，图标字体，部分文本重绘色，长文本显示等.

标签API接口

API接口很多，在原子的资料里也写得很清楚，只罗列一些我常用的API.

1. lv_label_set_text_fmt

   使用方法和printf很接近，示例:
   lv_label_set_text_fmt(now_label, "%d", (val_last));,需要注意的是，这个文本内容是动态文本，真正显示内容的内存空间是lvgl自己分配的.

2. lv_label_set_align(lv_obj_t * label, lv_label_align_t align)

   设定文本对齐方式，共三种方式，左右对齐和剧中对齐.
   LV_LABEL_ALIGN_LEFT LV_LABEL_ALIGN_CENTER LV_LABEL_ALIGN_RIGHT

3. lv_label_set_recolor(lv_obj_t * label, bool en)

   文本重绘色功能是否打开.

4. lv_label_set_style(lv_obj_t * label, lv_label_style_t type, const lv_style_t * style)

   设定传入label对象的style,type目前只有LV_LABEL_STYLE_MAIN一个选项.

LVGL样式

简单理解，样式基本等价于控件的共有属性，比如颜色，宽度等.但是有些特殊的控件拥有一些特殊的属性，比如圆角半径，边框透明度等，所以LVGL里的样式包含大量属性，对于一些控件来说，必然会存在一些冗余而用不到的属性.

LVGL样式数据结构

如下所示，图来自于原子的资料,一共分为5大块.

style.body

body是背景的属性，比如绘制按钮，属性框等.

1. main_color和grad_color分别为背景板的上半部分颜色和下半部分颜色，如果两者颜色不等，LVGL内部会对做出一个上半部分到下半部分的颜色渐变效果.
2. radius设定背景板的圆角半径.
3. opa设定该面板的透明属性，当透明度比较低的时候可以看到后面的内容.
4. board设定面板边框属性.
   • part是绘制哪几条边框.
   • opa是边框透明度(0-255).
5. shadow设定阴影效果
   • type 阴影的类型，是四周全部阴影还是只是底部阴影(只有两个选择).
6. padding内边距，四个方向距离对象的距离.
   • inner 是容器内每个对象的间隔，和字体的间隔不一样.

以下图为例.

途中黄色部分是阴影效果.
绿色部分是边框效果.
红黑色部分为main_color和grad_color效果.
四个角的弧度为radius设定的效果.

style.text

文本的属性，各个成员变量也比较好理解.说一下下面两个.

1. letter_spcae 是字母间的间隔
2. line_space 是行与行之间的间隔

style.image

图像的属性，这个要记录一下.

1. color和intense

   指定混合颜色和混合强度，将图片的每一个像素点与指定颜色按照指定强度混合产生新的像素点数据.
   intense属性取值范围0-255.

2. opa

   图像的透明度，取值范围0-255.

备注: 以上图举例，屏幕中间的闹钟图片当intense为200时，比较偏向于红色，当intense为1时，基本无限趋近于白色.

style.line

属性从字面意思就可以得知.说一下rounded,为1代表末尾用圆角绘制.如下图.

style.glass

这个比较简单，当为1时,子对象无法从父对象继承样式.为0时，子对象如果样式为NULL，则从父对象继承样式.

样式的使用

在LVGL里面内置了13个系统自带样式.效果如下所示.

备注： 这些系统内置样式的glass都为1,意味着这些样式无法被继承.

样式相关的API使用最多的是下面几个.

• lv_style_copy(lv_style_t * dest, const lv_style_t * src)

  将src的样式拷贝到dest中.

• lv_obj_set_style(lv_obj_t * obj, const lv_style_t * style)

  设定对象的样式，如果不是基础对象则使用lv_xxx_set_style(lv_obj_t *obj, lv_xxx_style_t type, const lv_style_t * style)

• lv_obj_refresh_style(lv_obj_t * obj)

  通知obj对象，样式已经改变，刷新样式，如果不调用，则下次运行lv_task_handler()的时候才会刷新.

  下面给出一个例子.

   lv_obj_t* bg_img = lv_img_create(lv_scr_act(), NULL);
   lv_img_set_src(bg_img, "S:./alarm_clock.bin");
   lv_obj_align(bg_img,NULL,LV_ALIGN_CENTER,0,0);
  
   static lv_style_t img_style;
   lv_style_copy(&img_style,&lv_style_plain);
   img_style.image.color = LV_COLOR_RED;
   img_style.image.intense = 200;
   lv_label_set_style(bg_img,LV_LABEL_STYLE_MAIN,&img_style);
  

  前三句是图片的显示，后面的就是图片的样式修改，主要用到了拷贝和设定样式.一般这两个也是最常用的函数.效果如下.

  

  可以很清晰的看到，一个红色闹钟图标.