littleVGL学习笔记7——lv_style 样式

2022-09-01 20:04:16 阅读：159 来源： 互联网

标签：style obj 样式 lv color opa littleVGL

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 样式的所有对象,此样式已发生了改变,请及时更新界面。

标签：style,obj,样式,lv,color,opa,littleVGL
来源： https://www.cnblogs.com/xiaohai123/p/16647642.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9