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