自动布局
- 布局是用于约束元素内部子元素的一个可选属性
- 父级添加自动布局属性后,内部一级子元素将按照设定的布局规则进行排列展示(注意:不可见元素不参与布局填充,但是位置、尺寸的数值会受自动布局的限制,在恢复可见后将参与重新排列布局)
- 启用布局后,子元素将无法修改位置信息(原有的信息会保留,从布局释放后依旧可生效)
- 开启自动布局不影响父级元素的自适应功能生效,子元素如开启了自适应,将完成内部自适应计算后,以最终尺寸进入布局进行排列
- 当布局配置/子元素内容发生变化时,均将刷新父级及其内部子元素的排列展示
- 每一个元素有且仅可拥有一个布局类属性
行列限制
- 行高
- 开启/关闭
- 开启
- 将统一每一行的行高,并且应用配置数值至行内子元素高度
- 一旦开启行高限制,子元素的尺寸将无法生效及被修改(界面/代码,原有的信息会保留,从布局释放后依旧可生效)
- 关闭:保留原有子元素行高进行排列,最终行高度为行内所有元素最大行高
- 开启
- 数值
- 布局内统一的行高度
- 由【相对父级y值比例】+【绝对像素值】共同确定
- 开启/关闭
- 列宽
- 与行高内容相似,转置关键信息可得,暂不重复赘述
内容填充
- 填充起点
- 开始填充子元素的起始位置(父元素框内)
- 选项
- 左上:沿着左上角朝向右/下侧(受填充方向控制)开始填充子元素
- 左下:沿着左下角朝向左/上侧开始填充子元素
- 右上:沿着右上角朝向左/下侧开始填充子元素
- 右下:沿着右下角朝向左/上侧开始填充子元素
- 填充方式
- 水平/垂直
- 根据起点位置,向起点位置水平/垂直反方向开始填充子元素
- 当填充到父元素可用空间不足下个元素展示时,触发自动换行/列
- 填充方向数量限制
- 开启/关闭
- 当填充方向行列数量到达上限时,自动新起一行/列继续内容填充
- 数值
- 对应填充方向的最大子元素行/列数
- 正整数
- 关闭:无数量限制,将在对应方向持续填充内容
- 开启/关闭
- 水平/垂直
- 填充间隙
- 填充各个子元素时,各个子元素之间的xy间隔
- 由【相对父级值比例】+【绝对像素值】共同确定
- 配置数值:x、y
- 内容排序
- 定义子元素的排列(填充)顺序
- 排序方式
- 列表排序
- 默认排序规则,根据子元素列表的排序,由下至上,填充子元素
- 自定义序列(与Zindex相似)
- 根据自定义数值来定义子元素的排列顺序,按数值大小升序排列,数值小的将在前面
- 当数值相同时,则使用列表排序
- 数值:整数,默认为1
- 列表排序
- 内容对齐
- 定义布局内全体子元素内容的对齐方式
- 对齐方式
- 垂直:上中下
- 水平:左中右
填充表现说明
- 尺寸变化
- 填充过程可能会对对子元素的外框大小进行调整(限定行高/列宽),在此过程:
- 由于子元素大小变化,锚定其属性值的相关数值也会跟随变化(如其下级比例宽度)
- 框架和图片元素整体拉伸到适配对应的X(列宽)、Y(行高)
- 文字元素只是外框变大,即文字可展示区域变大,文本本身大小不变
- 填充过程可能会对对子元素的外框大小进行调整(限定行高/列宽),在此过程: