布局控制容器组件的子项如何排列。本指南介绍 anyui-LIVE 中可用的布局选项,以及它们在生成的 LVGL 输出中的表现。
概述
任何组件都可以作为布局容器。当容器使用布局时,其子项会按照布局规则自动放置,而不是固定在某个位置。anyui-LIVE 会在画布上实时渲染布局,因此改动立即可见,并会在预览与生成的代码中体现。
布局设置位于检查器的布局分组中。
模式
模式选项用于选择容器的布局引擎:
- 无 - 子项手动放置,不受布局规则影响。
- 弹性 - 子项由弹性容器排列。
弹性流向
弹性流向设置弹性容器的方向与换行策略,决定子项是按行、按列还是以其换行变体排列:
- 行 / 行反向
- 列 / 列反向
- 行换行 / 行换行反向
- 列换行 / 列换行反向
对齐
弹性容器提供三种对齐选项:
- 主轴对齐 - 沿主轴(弹性流向方向)分布子项:起始、居中、结束、均匀分布、环绕分布或两端分布。
- 交叉轴对齐 - 沿交叉轴(垂直于弹性流向方向)对齐子项。
- 轨道对齐 - 当流向创建多行或多列时,对齐换行的弹性轨道。
间距
- 行间距 - 设置行与行之间的间隔。
- 列间距 - 设置列与列之间的间隔。
间距值为非负整数,单位为像素。