1.介绍

利用样式可以对 UI 界面进行重绘和重用,利用多个不同的样式来形成 Theme主题系统,所以样式在 littleVGL 中有着很重要的地位。对于 lv_obj 基础对象而言,每一个对象都会有一个 lv_style 样式,但对于一个其他的控件(比如 lv_btn 按钮控件)而言,可能会拥有多个样式,因为一个稍微复杂点的控件可能是由多个子部件组成的,而每一个子部件可能都需要相应的样式来修饰,所以表面上看来,这个控件拥有了多个样式。
  一个样式主要是由 body 背景,text 文本,image 图片,line 线条等4部分组成的,然后其中每一部分又由很多属性组成。样式的结构大体如下：

2.lv_style 的 API 接口

2.1 主要数据类型

2.1.1 边框部件数据类型

enum {
LV_BORDER_NONE = 0x00, //无边框
LV_BORDER_BOTTOM = 0x01, //底边框
LV_BORDER_TOP = 0x02, //上边框
LV_BORDER_LEFT = 0x04,//左边框
LV_BORDER_RIGHT = 0x08,//右边框
LV_BORDER_FULL = 0x0F,//四条边框
LV_BORDER_INTERNAL = 0x10, //用于类矩阵的控件,如矩阵按钮
};
typedef uint8_t lv_border_part_t;

2.1.2 阴影类型数据类型

enum {
LV_SHADOW_BOTTOM = 0, //只绘制底部阴影
LV_SHADOW_FULL, //绘制所有边的阴影
};
typedef uint8_t lv_shadow_type_t;

2.1.3 样式句柄数据类型

typedef struct
{
 uint8_t glass : 1;
  struct
  {
  lv_color_t main_color;
  lv_color_t grad_color;
  lv_coord_t radius;
  lv_opa_t opa;
   struct
   {
   lv_color_t color;
   lv_coord_t width;
   lv_border_part_t part;lv_opa_t opa;
   } border;
   struct
   {
   lv_color_t color;
   lv_coord_t width;
   lv_shadow_type_t type;
   } shadow;
   struct
   {
   lv_coord_t top;
   lv_coord_t bottom;
   lv_coord_t left;
   lv_coord_t right;
   lv_coord_t inner;
   } padding;
   
  } body;
  struct
  {
  lv_color_t color;
  lv_color_t sel_color;
  const lv_font_t * font;
  lv_coord_t letter_space;
  lv_coord_t line_space;
  lv_opa_t opa;
  } text;
  struct
  {
  lv_color_t color;
  lv_opa_t intense;
  lv_opa_t opa;
  } image;
  struct
  {
  lv_color_t color;
  lv_coord_t width;
  lv_opa_t opa;
  uint8_t rounded : 1;
  } line;
} lv_style_t;

2.2 API 接口

2.2.1 样式初始化

void lv_style_init(void);
这个接口是用来初始化自带的系统样式的,由 littleVGL 内部自行完成调用,我们不需要理会,littleVGL 自带了 13个系统样式,供其内部使用,当然了也可供我们用户外部使用,这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;

系统样式效果图：

2.2.2 样式拷贝

void lv_style_copy(lv_style_t * dest, const lv_style_t * src);

参数:
dest: 目的样式,即拷贝给谁
text: 源样式,即从那里拷贝

2.2.3 使用样式

//基础对象设置样式
void lv_obj_set_style(lv_obj_t * obj, const lv_style_t * style);
//其他控件设置样式,其中 xxx 代表未知的控件名(label,btn 等等)
void lv_xxx_set_style(lv_obj_t *obj, lv_xxx_style_t type, const lv_style_t * style);

参数:
obj: 对象句柄
type: 这个参数对基础对象无效,对其他控件有效,用于设置控件上某个部件的样式
style: 设置的样式,必须得是静态的或全局的或堆上分配的

2.2.4 刷新样式(作用于单个对象)

void lv_obj_refresh_style(lv_obj_t * obj);

参数:
obj: 对象句柄

通知 obj 对象,其所使用的样式以发生了改变,请及时更新界面。

2.2.5 刷新样式(作用于多个对象)

void lv_obj_report_style_mod(lv_style_t * style);

参数:
style: 要被刷新的样式

通知已使用了 style 样式的所有对象,此样式已发生了改变,请及时更新界面。