lvgl8.3 中若一个容器控件200x296,是浮动布局,LV_FLEX_FLOW_COLUMN ;里面有三个200x296大小的控件,怎么实现滑动时,让这三个子控件根据情况自行居中
时间: 2024-10-23 13:04:37 浏览: 19
LVGL配置文件详解lv_conf.h(V7.9.1).pdf
5星 · 资源好评率100%
在LVGL 8.3中,要实现一个200x296像素的浮动布局(LV_FLEX_FLOW_COLUMN)容器内有三个同样大小的子控件,在滑动时能够根据容器空间自适应居中,你可以使用LV_FLEX布局的一些属性来达到这个效果。
首先,你需要设置容器的属性,使其允许子控件在垂直方向上自由伸缩:
```c
lv_obj_t *container = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_size(container, LV_HOR_RES, LV_VER_RES); // 容器尺寸与屏幕匹配
lv_cont_set_flex_flow(container, LV_FLEX_FLOW_COLUMN);
lv_cont_set_flex_fit(container, LV_FLEX_FIT_XY); // 启用水平和垂直自适应
```
接着,创建并添加三个200x296的子控件,并将它们作为布局内的动态对象处理:
```c
lv_obj_t *child1 = lv_obj_create(container, NULL);
lv_obj_set_size(child1, 200, 296);
lv_obj_t *child2 = lv_obj_create(container, NULL);
lv_obj_set_size(child2, 200, 296);
lv_obj_t *child3 = lv_obj_create(container, NULL);
lv_obj_set_size(child3, 200, 296);
// 添加到容器
lv_layout_add_obj(&container->layout, child1);
lv_layout_add_obj(&container->layout, child2);
lv_layout_add_obj(&container->layout, child3);
```
然后,当容器大小发生变化时,如滑动事件触发,你可以监听`LV_EVENT_SIZE_CHANGED`事件,并根据新尺寸调整子控件的位置。这里可以计算剩余空间,然后平均分配给每个子控件,让它们居中:
```c
static void on_container_resized(lv_event_t *e)
{
lv_cont_t *cont = lv_event_get_target(e);
lv_style_t *style;
int x = cont->size.width / 3;
style = lv_theme_get_style(lv_cont_get_style(cont), LV_SUBSTYLE_CONTENT);
lv_obj_set_pos(child1, 0, (cont->size.height - 296) / 2);
lv_obj_set_pos(child2, x, (cont->size.height - 296) / 2);
lv_obj_set_pos(child3, x * 2, (cont->size.height - 296) / 2);
// 更新其他需要的位置调整逻辑...
}
lv_obj_reg_event(container, LV_EVENT_SIZE_CHANGED, on_container_resized);
```
以上就是如何在LVGL 8.3的浮动布局中,通过调整子控件位置实现滑动时自动居中。记得添加必要的事件回调和样式设置。
阅读全文