littleVGL学习笔记8——lv_cont 容器

1. 介绍

  所谓的容器就是一个载体,用来装东西的,在 littleVGL 中,可以用来存放各种各样的子对象,当子对象的数量越来越多时,子对象们在父容器中的排列方式就显得尤为重要,因此lv_cont 容器就有一个专门的 Layout 布局属性来约束子对象们的摆放,layout 布局间隙是由样式来控制的,具体表现在 style.body.padding 样式属性上,lv_cont 容器除了 layout 这个重要特性外,还有一个 Auto fit 大小自动适应的特性。

2. lv_cont 的 API 接口

2.1 主要数据类型

2.1.1 布局数据类型

enum {
LV_LAYOUT_OFF = 0,
LV_LAYOUT_CENTER,
LV_LAYOUT_COL_L,
LV_LAYOUT_COL_M,
LV_LAYOUT_COL_R,
LV_LAYOUT_ROW_T,
LV_LAYOUT_ROW_M,
LV_LAYOUT_ROW_B,
LV_LAYOUT_PRETTY,
LV_LAYOUT_GRID,
_LV_LAYOUT_NUM //这个值是无意义的,只是用来记录一下有多少种布局方式
};
typedef uint8_t lv_layout_t;

1) LV_LAYOUT_OFF

  这个值是用来禁止布局功能的,当禁止之后,对于子对象在容器中的摆放位置,子对象必须得手动通过 lv_obj_set_pos(child,x,y);这样的接口来设置其具体的位置,如果没有禁止布局功能的话,就算子对象手动调用lv_obj_set_pos(child,x,y);接口,也是无效的。

2) LV_LAYOUT_CENTER

  把所有的子对象以从上到下的方式摆放到父容器的正中心,如下图所示:

3) LV_LAYOUT_COL_L

  从父容器的左上角开始,把所有的子对象以从上到下的方式进行摆放,如下图所示:

  其中A,B,C 子对象之间的垂直间距可以通过lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改。

4) LV_LAYOUT_COL_M

从父容器的顶部中心点开始,把所有的子对象以从上到下的方式进行摆放,如下图所示:

5) LV_LAYOUT_COL_R

从父容器的右上角开始,把所有的子对象以从上到下的方式进行摆放,如下图所示:

其中A,B,C 子对象之间的垂直间距可以通过lv_cont_style.body.padding.inner样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改。

6) LV_LAYOUT_ROW_T

从父容器的左上角开始,把所有的子对象以从左到右的方式进行摆放,如下图所示:

  其中A,B,C 子对象之间的水平间距可以通过lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改。

7) LV_LAYOUT_ROW_M

从父容器的左边中心点开始,把所有的子对象以从左到右的方式进行摆放,如下图所示:

  其中A,B,C 子对象之间的水平间距可以通过lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改。

8) LV_LAYOUT_ROW_B

从父容器的左下角开始,把所有的子对象以从左到右的方式进行摆放,如下图所示:

  其中A,B,C 子对象之间的水平间距可以通过lv_cont_style.body.padding.inner样式值来修改,与父容器下边的距离可以通过 lv_cont_style.body.padding.bottom 样式值来修改。

9) LV_LAYOUT_PRETTY

从父容器的左上角开始,把所有的子对象以从左到右,从上到下的方式进行摆放,并且保证每一行都均匀分布,如下图所示:

10) LV_LAYOUT_GRID

LV_LAYOUT_GRID 和 LV_LAYOUT_PRETTY 是很相似的,但是LV_LAYOUT_GRID 不要求在每一行均匀分布,而是按照lv_cont_style.body.padding.inner 指定的间隙依次摆放。

2.1.2 大小自适应数据类型

enum {
LV_FIT_NONE,
LV_FIT_TIGHT,
LV_FIT_FLOOD,
LV_FIT_FILL,
_LV_FIT_NUM //这个值是无意义的,只是用来记录一下有多少种自适应方式
};
typedef uint8_t lv_fit_t;

  这个数据类型就是 lv_cont 容器的大小自适应特性,所谓的自适应就是指 lv_cont 容器的大小可以根据它的子对象们或父对象的大小来自动调整。

2.2 API 接口

2.2.1 创建容器

lv_obj_t * lv_cont_create(lv_obj_t * par, const lv_obj_t * copy);

参数:
par: 指向父对象
copy: 此参数可选,表示创建新对象时,把 copy 对象上的属性值复制过来。
返回值:
返回新创建出来的容器对象,如果为 NULL 的话,说明堆空间不足了。

2.2.2 设置容器的布局方式

void lv_cont_set_layout(lv_obj_t * cont, lv_layout_t layout);

参数:
cont: 容器对象
layout: 布局方式,请详看 2.1.1 布局数据类型那一小章节。

2.2.3 设置容器 4 个方向上的自适应方式

void lv_cont_set_fit4(lv_obj_t * cont, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom);

参数:
cont: 容器对象
left: 左边的自适应方式,
right: 右边的自适应方式
top: 上边的自适应方式
bottom: 下边的自适应方式。
  比如说,我设置容器 A 的左边为 LV_FIT_NONE 方式,设置容器 A 的右边为LV_FIT_TIGHT 方式,假如现在子对象在宽度上增大了,那么容器 A 的宽度也会跟着变大,但是容器 A 只会朝着右边这个方向来把宽度增大的,因为容器 A 的左边是 LV_FIT_NONE 方式,即左边是无自适应的。

2.2.4 设置容器水平和垂直方向上的自适应方式

static inline void lv_cont_set_fit2(lv_obj_t * cont, lv_fit_t hor, lv_fit_t ver);

参数:
cont: 容器对象
hor: 水平方向上的自适应方式
ver: 垂直方向上的自适应方式

2.2.5 设置容器的自适应方式

static inline void lv_cont_set_fit(lv_obj_t * cont, lv_fit_t fit);

参数:
cont: 容器对象
fit: 四个方向上的共同自适应方式。

2.2.6 设置容器的样式

static inline void lv_cont_set_style(lv_obj_t * cont, lv_cont_style_t type, const lv_style_t *
style);

参数:
cont: 容器对象
type: 设置容器上的哪部分样式,目前只有 LV_CONT_STYLE_MAIN 一个可选值
style: 样式