# 自动布局

![](/QQ20241112-155425.png)

- 布局是用于约束元素内部子元素的一个可选属性
- 父级添加自动布局属性后，内部一级子元素将按照设定的布局规则进行排列展示（注意：不可见元素不参与布局填充，但是位置、尺寸的数值会受自动布局的限制，在恢复可见后将参与重新排列布局）
- 启用布局后，子元素将无法修改位置信息（原有的信息会保留，从布局释放后依旧可生效）
- 开启自动布局不影响父级元素的自适应功能生效，子元素如开启了自适应，将完成内部自适应计算后，以最终尺寸进入布局进行排列
- 当布局配置/子元素内容发生变化时，均将刷新父级及其内部子元素的排列展示
- 每一个元素有且仅可拥有一个布局类属性

## 行列限制
- 行高
    - 开启/关闭
        - 开启
            - 将统一每一行的行高，并且应用配置数值至行内子元素高度
            - 一旦开启行高限制，子元素的尺寸将无法生效及被修改（界面/代码，原有的信息会保留，从布局释放后依旧可生效）
        - 关闭：保留原有子元素行高进行排列，最终行高度为行内所有元素最大行高
    - 数值
        - 布局内统一的行高度
        - 由【相对父级y值比例】+【绝对像素值】共同确定
- 列宽
    - 与行高内容相似，转置关键信息可得，暂不重复赘述

![](/QQ20241112-155036.png)

## 内容填充
- 填充起点
    - 开始填充子元素的起始位置（父元素框内）
    - 选项
        - 左上：沿着左上角朝向右/下侧（受填充方向控制）开始填充子元素
        - 左下：沿着左下角朝向左/上侧开始填充子元素
        - 右上：沿着右上角朝向左/下侧开始填充子元素
        - 右下：沿着右下角朝向左/上侧开始填充子元素

![](/QQ20241112-155226.png)

- 填充方式
    - 水平/垂直
        - 根据起点位置，向起点位置水平/垂直反方向开始填充子元素
        - 当填充到父元素可用空间不足下个元素展示时，触发自动换行/列
    - 填充方向数量限制
        - 开启/关闭
            - 当填充方向行列数量到达上限时，自动新起一行/列继续内容填充
            - 数值
                - 对应填充方向的最大子元素行/列数
                - 正整数
        - 关闭：无数量限制，将在对应方向持续填充内容

![](/QQ20241112-155254.png)

- 填充间隙
    - 填充各个子元素时，各个子元素之间的xy间隔
    - 由【相对父级值比例】+【绝对像素值】共同确定
    - 配置数值：x、y

![](/QQ20241112-155317.png)

- 内容排序
    - 定义子元素的排列（填充）顺序
    - 排序方式
        - 列表排序
            - 默认排序规则，根据子元素列表的排序，由下至上，填充子元素
        - 自定义序列（与Zindex相似）
            - 根据自定义数值来定义子元素的排列顺序，按数值大小升序排列，数值小的将在前面
            - 当数值相同时，则使用列表排序
            - 数值：整数，默认为1
- 内容对齐
    - 定义布局内全体子元素内容的对齐方式
    - 对齐方式
        - 垂直：上中下
        - 水平：左中右

![](/QQ20241112-155340.png)

## 填充表现说明
- 尺寸变化
    - 填充过程可能会对对子元素的外框大小进行调整（限定行高/列宽），在此过程：
        - 由于子元素大小变化，锚定其属性值的相关数值也会跟随变化（如其下级比例宽度）
        - 框架和图片元素整体拉伸到适配对应的X（列宽）、Y（行高）
        - 文字元素只是外框变大，即文字可展示区域变大，文本本身大小不变