你将得到什么
这篇教程用“做一张卡片组件”为主线，把 Auto Layout（自动布局）的关键概念一次讲透：从外层容器、内层结构、约束与填充、间距体系，到最后封装成可复用组件并做规范自检。跟着做完，你会得到一个在不同内容长度与不同宽度下都不崩的卡片。
准备：建立文件与基础样式
目标：先把字体、色板、圆角、阴影这些“基础常量”确定下来，后面做组件会快很多。
- 新建一个 Frame（例如 1440×900），作为画布。
- 在右侧面板确认字体与字号：标题 16/20，正文 14/20（你也可以按项目规范替换）。
- 准备颜色变量（可用 Styles 或 Variables）：背景 #FFFFFF，描边 #E7E7E7，正文 #222，次要文字 #666，强调色 #2F6BFF。
步骤 1：搭卡片外壳（容器）
- 画一个矩形作为卡片背景，设置圆角 12，填充白色，描边 1px #E7E7E7。
- 选中矩形，按 Shift + A 把它变成 Auto Layout 容器（也可以先画 Frame 再 Auto Layout）。
- 在 Auto Layout 设置里：
- 方向：Vertical（垂直）
- Padding：16 / 16 / 16 / 16
- Item spacing：12
- 容器宽度先设 360（常见移动端卡片宽度），高度保持 Hug contents。
关键点：卡片外壳一定要用 Auto Layout 做“装东西的盒子”，后面内容变长变短才会自动撑开。
步骤 2：做头部信息区（标题 + 标签/状态）
- 在卡片容器里放一个 Frame，命名为 Header，按 Shift + A 设为 Horizontal（水平）Auto Layout。
- Header 的设置：
- Item spacing：8
- Alignment：Space between（如果要左右两端对齐）
- 高度：Hug contents；宽度：Fill container
- 左侧放标题文本（例如“课程更新：Auto Layout 进阶”），文本设置为 16/20，字重 Medium。
- 右侧做一个 Tag：一个小容器（Horizontal Auto Layout），padding 6/10，圆角 999，背景 #EEF4FF，文字 12/16，颜色 #2F6BFF。
常见坑：标题文字一定要设为 Hug contents（高度），宽度一般也 Hug；如果希望标题自动换行，则把标题宽度设为 Fill container，并在 Header 里把左侧区域做成 Fill。
步骤 3：做正文简介区（可多行文本）
- 在卡片里 Header 下方放一段正文文本，字号 14/20，颜色 #666。
- 把正文文本宽度设为 Fill container，这样卡片变宽时它会自动拉伸；内容变长时会自动换行并撑高。
步骤 4：做操作区（按钮/链接）
- 新建一个 Actions 容器（Horizontal Auto Layout），宽度 Fill container，Item spacing 8。
- 做主按钮：
- 容器 padding：10/14，圆角 10
- 背景：#2F6BFF
- 文字：14/20，白色
- 宽度策略：Hug contents（如果要自适应文字）或 Fill（如果要两按钮等宽）
- 做次按钮（描边款）：背景透明，描边 1px #E7E7E7，文字 #222。
- 如果要“右侧对齐按钮”：把 Actions 的主轴对齐设为 End，或在 Actions 内加一个 Spacer（宽度 Fill）。
步骤 5：让卡片真正“响应式”（关键设置清单）
下面这些设置，决定了你的卡片在不同宽度、不同文本长度时是否稳定：
- 卡片容器：宽度可设为 Fill container（放在列表中时），高度 Hug contents。
- Header：宽度 Fill container；如果右侧 Tag 固定宽度，左侧标题可 Fill + 换行。
- 正文文本：宽度 Fill container，确保可换行。
- 按钮：如果两按钮要等宽，把按钮容器设为 Fill 并启用“Fill container”；否则用 Hug。
- 间距体系：统一用 8/12/16 的倍数，后期做组件变体时不会乱。
步骤 6：封装成组件 + 变体（Variants）
- 选中整张卡片，按 Ctrl + Alt + K（Create component）。
- 给组件命名建议：Card / Content，子层级命名清晰：Header、Body、Actions。
- 创建变体：
- Variant 1：带 Tag（默认）
- Variant 2：无 Tag（隐藏 Tag 层）
- Variant 3：单按钮 / 双按钮
- 把可替换内容暴露为组件属性（Text property / Boolean property），方便在实例里改文案而不破结构。
自检：3 分钟排查“为什么我的 Auto Layout 总是乱”
- 内容变多时，容器是否仍是 Hug contents？（不该用固定高度）
- 需要撑满宽度的层是否设为 Fill container？（尤其是正文与 Header）
- 文字是否允许换行？（宽度 Fill + 合理的文本框）
- 按钮布局是否一致？（同一组按钮不要混用 Hug/Fill 导致对齐怪）
- 间距是否统一？（不要一会儿 10 一会儿 14，后期难维护）
扩展练习：把卡片放进列表并实现自适应
- 新建一个列表容器（Vertical Auto Layout），padding 24，spacing 16。
- 把卡片实例拖进列表容器，把卡片宽度设为 Fill container。
- 尝试把列表容器宽度从 360 改到 680，观察标题、正文与按钮是否仍然合理。
如果你的卡片在这一步仍然保持稳定，说明 Auto Layout 的核心设置已经掌握。以后做弹窗、表单、设置页，都是同一套思路：先确定容器策略，再逐层决定 Hug/Fill。
