合宙Air724UG LuatOS-Air LVGL API控件--容器 (Container)

容器 (Container)

容器是 lvgl 相当重要的一个控件了，可以设置布局，容器的大小也会自动进行调整，利用容器可以创建出自适应成都很高的界面布局。

代码示例
– 创建容器
cont = lvgl.cont_create(lvgl.scr_act(), nil)
lvgl.obj_set_auto_realign(cont, true)
lvgl.obj_align(cont, nil, lvgl.ALIGN_CENTER, 0, 0)
lvgl.cont_set_fit(cont, lvgl.FIT_TIGHT)
lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_MID)

– 添加标签
label = lvgl.label_create(cont, nil)
lvgl.label_set_text(label, “Short text”)

label = lvgl.label_create(cont, nil)
lvgl.label_set_text(label, “It is a long text”)

label = lvgl.label_create(cont, nil)
lvgl.label_set_text(label, “Here is an even longer text”)
创建
容器是通过函数 lvgl.cont_create 创建的。几乎所有的控件创建函数都是需要两个参数，第一个参数是父对象，通常这个控件传的都是容器控件。因为控件父子关系展现的是一个包含关系，在一个 按钮 里创建另一个按钮，虽然也可以这么做，但是从正常角度来看很少有这种需求，毕竟不是谁家门前都有两棵枣树的。

cont = lvgl.cont_create(lvgl.scr_act(), nil)
布局
这个概念是容器控件的一个重点，自动添加到容器内的控件是在左上角叠加显示的。

function img(cont, path)
local pic = lvgl.img_create(cont, nil)
lvgl.img_set_src(pic, path)
end

– 创建主容器
cont = lvgl.cont_create(nil, nil)
lvgl.disp_load_scr(cont)

img(cont, “/lua/png50.png”)
img(cont, “/lua/png40.png”)
img(cont, “/lua/png30.png”)
这段代码首先创建了一个容器，然后向容器添加了三张图片，依靠容器的默认布局显示内容如下：
lvgl.LAYOUT_OFF 也就是没有布局, 所有内容全部叠加显示

我们再来看另一种常用的布局 lvgl.LAYOUT_CENTER 居中布局

接着看看剩下的布局 lvgl.LAYOUT_COLUMN_LEFT 元素靠左按列排布

lvgl.LAYOUT_COLUMN_MID 元素居中按列排布

lvgl.LAYOUT_COLUMN_RIGHT 元素靠右按列排布

lvgl.LAYOUT_GRID 元素按顶部高度行排列

lvgl.LAYOUT_PRETTY_BOTTOM 元素按照底部高度等距排列

lvgl.LAYOUT_PRETTY_MID 元素按照居中高度等距排列

lvgl.LAYOUT_PRETTY_TOP 元素按照顶部高度等距排列

lvgl.LAYOUT_ROW_BOTTOM 元素靠底排列

lvgl.LAYOUT_ROW_MID 元素居中排列

lvgl.LAYOUT_ROW_TOP 元素靠顶排列

以上就是容器所有的布局方式。

自适应
容器的另一个特点就是自适应，可以根据子对象或者父对象自动更改容器大小。

lvgl.FIT_NONE – 不会自动更改大小
lvgl.FIT_TIGHT – 将容器紧缩在内容周围
lvgl.FIT_PARENT – 父容器的大小减去 pad_top/bottom/left/right 后的空间。
lvgl.FIT_MAX – 容器至少是父容器大小
API
lvgl.cont_create
调用 lvgl.cont_create(par, copy)
功能 创建一个容器对象
返回 指向创建的容器的指针
参数
par 指向对象的指针, 它将是新容器的父对象
copy 指向容器对象的指针, 如果不为 nil, 则将从其复制新对象
lvgl.cont_set_layout
调用 lvgl.cont_set_layout(cont, layout)
功能 设置容器的布局方式
参数
cont 指向容器对象的指针
layout 容器的布局方式
lvgl.cont_set_fit4
调用 lvgl.cont_set_fit4(cont, left, right, top, bottom)
功能 分别设置容器四个方向上的拟合方式
参数
cont 指向容器对象的指针
left 左边的拟合方式
right 右边的拟合方式
top 顶部的拟合方式
bottom 底部的拟合方式
lvgl.cont_set_fit2
调用 lvgl.cont_set_fit2(cont, hor, ver)
功能 设置水平和垂直方向的拟合方式
参数
cont 指向容器对象的指针
hor 水平方向上的拟合方式
ver 垂直方向上的拟合方式
lvgl.cont_set_fit
调用 lvgl.cont_set_fit(cont, fit)
功能 一次性设置容器四个方向上的拟合方式
参数
cont 指向容器对象的指针
fit 容器四个方向上的拟合方式
lvgl.cont_get_layout
调用 lvgl.cont_get_layout(cont)
功能 获取容器的布局
返回 容器当前的布局方式
参数
cont 指向容器对象的指针
lvgl.cont_get_fit_left
调用 lvgl.cont_get_fit_left(cont)
功能 获取容器左边的拟合方式
返回 获取容器左边的拟合方式
参数
cont 指向容器对象的指针
lvgl.cont_get_fit_right
调用 lvgl.cont_get_fit_right(cont)
功能 获取容器右边的拟合方式
返回 获取容器右边的拟合方式
参数
cont 指向容器对象的指针
lvgl.cont_get_fit_top
调用 lvgl.cont_get_fit_top(cont)
功能 获取容器顶部的拟合方式
返回 获取容器顶部的拟合方式
参数
cont 指向容器对象的指针
lvgl.cont_get_fit_bottom
调用 lvgl.cont_get_fit_bottom(cont)
功能 获取容器底部的拟合方式
返回 获取容器底部的拟合方式
参数
cont 指向容器对象的指针