文章目录
-
-
- [一、自动布局内元素只有 3 种尺寸模式](#一、自动布局内元素只有 3 种尺寸模式)
- 二、直接改数值（最直接）
- 三、拖动调整（可视化）
- 四、父级与子级配合（关键逻辑）
- 五、常见场景示例
-
- [1）按钮（水平 Auto Layout：图标+文字）](#1）按钮（水平 Auto Layout：图标+文字）)
- [2）卡片（垂直 Auto Layout：图+标题+正文）](#2）卡片（垂直 Auto Layout：图+标题+正文）)
- [3）导航栏（水平 Auto Layout：左logo + 中菜单 + 右按钮）](#3）导航栏（水平 Auto Layout：左logo + 中菜单 + 右按钮）)
-
一、自动布局内元素只有 3 种尺寸模式
选中 Auto Layout 里的子元素 → 右侧 Resizing：
-
Hug Contents（包裹内容）
大小由内容决定（文字、图标、子元素），父级会跟着收缩/撑开。
常用：按钮文字、标签、图标。
-
Fill Container（填充容器）
占满父 Auto Layout 的可用空间，多个 Fill 会均分 。
常用：卡片正文、列表项、搜索框。
-
Fixed Size（固定尺寸）
宽高写死，不会被内容或父级拉伸。
常用：固定图标、头像、分割线。
可以对宽和高分别设不同模式，例如：宽度 Fill、高度 Hug。
二、直接改数值（最直接）
- 选中元素（子元素或父 Auto Layout 都可以）
- 右侧 Design → Size ：
- 直接输入宽/高 → 自动变成 Fixed
- 点下拉箭头切换 Hug / Fill / Fixed
三、拖动调整（可视化）
- 选中元素
- 直接拖边框控制点：
- 拖后 → 该轴变成 Fixed
- 按住 Alt / Option 拖 → 中心对称缩放
- 父 Auto Layout 是 Hug 时，拖子元素会让父级自动缩放
四、父级与子级配合（关键逻辑）
- 父 Hug + 子 Fixed：子多大，父就多大
- 父 Fixed + 子 Fill：子自动撑满父
- 父 Fixed + 子 Hug：子随内容，父大小不变
- 父子都 Fixed：互不影响，容易溢出
一句话：一个固定、一个自适应，布局才稳定。
五、常见场景示例
1）按钮（水平 Auto Layout：图标+文字）
- 图标：Fixed 24×24
- 文字：Hug（默认）
- 父按钮：Hug + Padding 8 16
2）卡片（垂直 Auto Layout：图+标题+正文）
- 图片：Fill 宽度、Fixed 高度 120
- 标题：Hug
- 正文：Fill 宽度、Hug 高度
- 卡片父级：Fixed 宽度 320、Hug 高度
3）导航栏（水平 Auto Layout：左logo + 中菜单 + 右按钮）
- Logo：Fixed 80×32
- 菜单：Fill（多个菜单会均分）
- 按钮：Hug
- 导航父级：Fixed 高度 56、Fill 宽度