一、核心底层逻辑自动布局本质是给一个父容器设置布局方向水平/垂直内边距Padding内容和容器边缘的距离间距Spacing子元素之间的距离对齐方式上/中/下、左/中/右大小规则适配内容 / 固定宽高 / 填充容器一旦开启 Auto Layout子元素位置、容器大小全部自动计算不能手动拖拽乱调。二、5个关键规则1. 方向水平Row/ 垂直Column垂直子元素从上往下排像列表水平子元素从左往右排像按钮栏2. 间距Item spacing子元素之间固定距离增删元素自动留空。比如间距8px加一个按钮自动空8px删一个自动闭合。3. 内边距Padding容器和内部内容的距离上下左右可分别设置。比如左16、右16文字变长容器左右始终留16px空白。4. 对齐方式控制子元素在容器里怎么对齐垂直布局左对齐 / 居中 / 右对齐水平布局顶部对齐 / 垂直居中 / 底部对齐5. 尺寸约束最重要自适应核心每个图层有 3 种模式Hug contents适配内容图层大小跟着内容变文字变长自动变大Fixed固定宽高固定不变Fill container填充容器占满父容器剩余空间做弹性布局这就是为什么按钮文字改了按钮自动变大卡片加内容自动变长。三、举个最直观例子一个按钮画矩形 文字选中两者 → 开启 Auto Layout垂直/水平都行设置内边距上下8、左右16间距0文字改成更长矩形自动加宽文字换行矩形自动加高全程不用手动调矩形大小。四、嵌套自动布局UI设计核心用法Figma 支持多层嵌套外层垂直布局 → 页面整体上下排布中层水平布局 → 一行放图标文字内层单个按钮自动布局实现整体响应式、局部自适应手机、平板、网页一键适配。五、和普通图层的本质区别普通图层位置大小手动控制改一个元素其他全部要手动挪自动布局规则控制改内容/增删元素全部自动重排
