【Lua-lvgl】3.容器cont

1 前言

官方demo的img中使用到cont，简单了解一下。

2 官方链接

lua img：https://doc.openluat.com/wiki/21?wiki_page_id=2571
在查看img的示例的时候，发现通过符号文字显示图片的demo无法正常运行。

symble = {
    "\xef\x80\x81", "\xef\x80\x88", "\xef\x80\x8b", "\xef\x80\x8c","\xef\x80\x8d", "\xef\x80\x91", "\xef\x80\x93", "\xef\x80\x95","\xef\x80\x99", "\xef\x80\x9c", "\xef\x80\xa1", "\xef\x80\xa6","\xef\x80\xa7", "\xef\x80\xa8", "\xef\x80\xbe", "\xef\x8C\x84","\xef\x81\x88", "\xef\x81\x8b", "\xef\x81\x8c", "\xef\x81\x8d","\xef\x81\x91", "\xef\x81\x92", "\xef\x81\x93", "\xef\x81\x94","\xef\x81\xa7", "\xef\x81\xa8", "\xef\x81\xae", "\xef\x81\xb0","\xef\x81\xb1", "\xef\x81\xb4", "\xef\x81\xb7", "\xef\x81\xb8","\xef\x81\xb9", "\xef\x81\xbb", "\xef\x82\x93", "\xef\x82\x95","\xef\x83\x84", "\xef\x83\x85", "\xef\x83\x87", "\xef\x83\xa7","\xef\x83\xAA", "\xef\x83\xb3", "\xef\x84\x9c", "\xef\x84\xa4","\xef\x85\x9b", "\xef\x87\xab", "\xef\x89\x80", "\xef\x89\x81","\xef\x89\x82", "\xef\x89\x83", "\xef\x89\x84", "\xef\x8a\x87","\xef\x8a\x93", "\xef\x8B\xAD", "\xef\x95\x9A", "\xef\x9F\x82",
}local img = lvgl.img_create(cont, nil)
lvgl.cont_set_layout(cont, lvgl.LAYOUT_GRID)
for i=1, #symble doimg = lvgl.img_create(cont, nil)lvgl.img_set_src(img, symble[i])
end

这里是因为cont没有初始化，而图片是放在cont中。注意依赖关系

3 官方demo

https://gitee.com/openLuat/LuatOS/tree/master/demo/lvgl/win32/lvgl_demo_test
注意，这里的示例较全，但是也需要结合自己的屏幕看着调整。

local cont_demo = {
    }function cont_demo.demo()local cont;cont = lvgl.cont_create(lvgl.scr_act(), nil);lvgl.obj_set_auto_realign(cont, true);                    --Auto realign when the size changes*/lvgl.obj_align_origo(cont, nil, lvgl.ALIGN_CENTER, 0, 0);  --This parametrs will be sued when realigned*/lvgl.cont_set_fit(cont, lvgl.FIT_TIGHT);lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_MID);local label;label = lvgl.label_create(cont, nil);lvgl.label_set_text(label, "Short text");sys.wait(500)label = lvgl.label_create(cont, nil);lvgl.label_set_text(label, "It is a long text");sys.wait(500)label = lvgl.label_create(cont, nil);lvgl.label_set_text(label, "Here is an even longer text");
endreturn cont_demo

4 代码–示例调整

我的开发板是合宙esp32 c3，屏幕是st7735，相关示例可以查看我lua专栏下的。

4.1原版demo

-- 注意需要自己先执行lvgl.init()
function cont()-- 初始化容器cont，无法设置长宽？--{
    local contcont = lvgl.cont_create(lvgl.scr_act(), nil)--lvgl.obj_set_size(cont,128,160)lvgl.obj_set_auto_realign(cont, true)                    --Auto realign when the size changes*/lvgl.obj_align_origo(cont, nil, lvgl.ALIGN_CENTER, 0, 0)  --This parametrs will be sued when realigned*/lvgl.cont_set_fit(cont, lvgl.FIT_TIGHT)     --此时cont依据内容拓展，容易左右超过界限-- lvgl.cont_set_fit(cont, lvgl.FIT_NONE) --此时cont未设置自适应状态，则内容在cont中lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_MID)--字符布局居中-- lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_LEFT) --布局靠左--}--创建标签labellocal label = lvgl.label_create(cont, nil)lvgl.label_set_text(label, "Short text")log.info("scr_load",lvgl.scr_load(cont))     --显示 容器sys.wait(500)label = lvgl.label_create(cont, nil)lvgl.label_set_text(label, "It is a long text")sys.wait(500)label = lvgl.label_create(cont, nil)lvgl.label_set_text(label, "Here is an even longer text")
end

显示如下

显示状态

1. 容器（边框的蓝色部分）随着显示内容而扩大。原因：设置了lvgl.cont_set_fit(cont,== lvgl.FIT_TIGHT==)
2. 显示的字符居中。原因：设置了居中lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_MID)
3. 容器的尺寸未设定。

4.2 修改尺寸

lvgl.obj_set_size(cont,128,160)
尺寸未生效，和上图一致

4.3 内容居左

这里是容器cont中的字符居左。
lvgl.cont_set_layout(cont, lvgl.LAYOUT_COLUMN_LEFT)

4.4 容器不随内容拓展

lvgl.cont_set_fit(cont, lvgl.FIT_NONE)

这时候显示的内容不超过容器cont，但是有部分字符丢失。这是因为我的屏幕尺寸有限，设置的cont的大小。
目前没有找到合适的方法去自动换行。

这些格式在luat_lv_enum.h文件中，路径如下：
https://gitee.com/openLuat/LuatOS/blob/master/components/lvgl/gen/luat_lv_enum.h

5 小结

本章简单介绍了容器的使用，先创建一个容器，然后为其贴上标签label，设置label的显示内容。