这篇教程带你从 0 到 1 做一个「可复用、可扩展、可响应」的卡片组件。你可以把它当成设计系统里最常见的基础模块：信息卡、商品卡、文章卡都能用同一套结构套出来。
1. 开始前：先把层级整理干净
在做 Auto Layout 之前，先把组件拆成最小稳定结构。建议用这 3 层：
- Card（最外层容器：背景、圆角、阴影、边框）
- Content（内容容器：内边距、纵向排版）
- Row/Block（每一块内容：标题行、信息行、按钮行等）
把图片、标题、描述、标签、按钮分别放在对应的 Block 里，别把所有元素直接堆在一层里，这样后面变体/响应会非常痛苦。
2. 给内容容器加 Auto Layout（纵向）
选中 Content（或把内容先包一层 Frame），按 Shift + A 开启 Auto Layout，设置为纵向（Vertical）。
- Spacing between items：建议 12 或 16（看你的栅格）
- Padding：建议左右 16、上下 16（移动端可用 12）
- Alignment：通常选 Left & Top，避免内容被居中拉扯
这一步做完，你的卡片会开始“自动排版”：新增/删除块时，间距会自动保持一致。
3. 图片区：固定高度 + 宽度跟随容器
常见做法是让图片区域宽度填满，保持固定高度（例如 160/180/200），再用裁切适配：
- 把图片放在一个 Frame 里（命名 Image）
- Image Frame 宽度设为 Fill container
- 高度设为固定值（Fixed）
- 图片本体选择 Fill（裁切铺满）或 Fit（完整显示）
这样卡片宽度变化时，图片会跟随变宽，但高度保持统一，列表会更整齐。
4. 标题与描述：用“内容自适应”减少手工改尺寸
标题和描述是最容易崩版的部分。推荐：
- 标题 Text：宽度设为 Fill container，高度 Hug contents
- 描述 Text：同样 Fill container，必要时设置行数限制（例如 2 行）
- 如果你需要“更长的描述版本”，别用手工拉高卡片，直接做一个变体（见下一节）
要点：让文本决定高度，让容器决定宽度，避免到处拉伸。
5. 按钮区：一行两按钮的 Auto Layout 小技巧
底部按钮常见两种布局：单按钮居右，或两按钮平分。
- 把按钮包一层 Frame（命名 Actions），开启横向 Auto Layout（Horizontal）
- 如果是两按钮平分：把两个按钮宽度设为 Fill container，Actions 的 Gap 设为 12
- 如果是单按钮居右：Actions 的 Alignment 设为 Right
按钮本身建议用组件（Button Component），内部再用 Auto Layout（文字+可选图标），这样不同文案也不容易挤坏。
6. 做变体（Variants）：让“同一张卡”拥有多种状态
当你发现需要“有无图片”“不同标签”“不同按钮数量”等组合时，就应该上 Variants：
- 选中 Card 组件，Create component set（创建组件集）
- 设置属性：例如 Image=On/Off、Size=S/M/L、CTA=None/Primary/Dual
- 用属性控制显示/隐藏某些 Block（Off 时直接移除该块，Auto Layout 会自动收拢）
技巧：不要在一个组件里做“超多隐藏层”，能用变体解决的就用变体，维护成本更低。
7. 响应式关键：约束（Constraints）与 Fill/Hug 的组合
卡片要在不同宽度下表现稳定，重点是：
- 外层 Card：宽度通常设为 Fill container（放进列表/栅格时自动拉伸）
- 内容区：尽量用 Auto Layout 的 Fill/Hug，不要依赖传统 Constraints 乱拉
- 需要固定高度的区域（图片）用 Fixed，高度变化会让列表不齐
如果你在栅格里使用：可以做 Size 变体（S/M/L）对应不同 padding 和字体大小，视觉更统一。
8. 常见坑位排查清单（遇到崩版先看这里）
- 文字被挤到一行：检查 Text 是否设置为 Fill container + Auto height
- 间距忽大忽小：确认容器只有一层 Auto Layout，不要同时在父子层都用手工分布
- 按钮不平分：确认按钮本身宽度为 Fill container，且父容器是 Auto Layout Horizontal
- 图片拉伸变形：图片本体用 Fill/Fit，而不是手动拉伸位图
9. 练习：10 分钟做完一套可复用卡片
- 做一个基础卡片：图片 + 标题 + 描述 + 单按钮
- 把图片做成 Image=On/Off 变体
- 把按钮做成 CTA=None/Primary/Dual 变体
- 做 Size=S/M/L 三个尺寸（只改 padding、字体、图片高度）
- 把卡片丢进 2 列、3 列栅格里测试：宽度变化时是否仍然整齐
做到这里，你就拥有了一个可以直接复用到项目里的基础卡片组件。后续做列表页、商城页、资讯页都会快很多。
