Sketch中适配可变高度文本的自适应卡片实现方法问询

嘿，这个问题我之前帮好几个设计师踩过坑——Sketch里做带可变高度文本的自适应卡片确实有技巧，尤其是标题1-3行、摘要6-12行这种场景，下面两个方法亲测好用，咱们一步步来：

方法一：用Auto Layout（最推荐，Sketch 71+支持） #

这是目前最流畅的解决方案，完全能实现你要的「摘要随标题高度自动定位」效果：

• 先把卡片的所有元素（缩略图、标题、摘要）放进一个容器组，右键这个组选择「Auto Layout > Enable」（快捷键Ctrl+Shift+A）。
• 给标题文本层设置固定宽度（比如240px），然后在右侧属性面板的「Size」里把高度改成Automatic——这样标题会根据内容自动换行，高度跟着内容变化。
• 同样给摘要文本层设置固定宽度，高度也设为Automatic，确保它能自适应内容行数。
• 调整容器组的Auto Layout参数：方向选「Vertical（垂直）」，给元素之间设置合适的间距（比如标题和摘要之间设12px），同时给容器组添加内边距（比如上下左右16px），避免内容贴边。
• 最后把容器组的高度设为Automatic，整个卡片就会跟着内容自动拉伸，标题换行变高时，摘要会自动被往下推，完全符合你的需求。

方法二：符号嵌套+智能布局（兼容旧版Sketch） #

如果你的Sketch版本比较旧，还没Auto Layout，可以用这个方法：

• 把标题单独做成一个符号，右键符号选择「Smart Layout > Vertical」，开启智能布局让它自适应高度。
• 摘要也做成独立符号，同样开启垂直方向的智能布局。
• 在主卡片符号里，把标题符号、摘要符号和缩略图摆放好，然后给主符号开启垂直智能布局，设置好元素间的间距。不过这个方法偶尔会有缓存延迟，不如Auto Layout顺滑。

避坑提示 #

• 一定要给文本层勾选**「Fixed Width」**，不然文本会横向拉伸而不是换行，高度就不会变化了。
• 不管用哪种方法，都别给文本层设置固定高度，必须让它自动适配内容。
• 如果遇到符号里文本高度不更新的情况，试试右键文本层选「Sync Symbol Instance」，或者重启Sketch，大概率是缓存问题。

举个简单的实操例子：

1. 新建组，开启Auto Layout，垂直方向，内边距16px，元素间距8px。
2. 拖入缩略图，设置固定宽高（比如80x80）。
3. 添加标题文本层，设置宽度240px，高度Automatic，开启文本换行。
4. 添加摘要文本层，同样宽度240px，高度Automatic，字体调小一号。
5. 现在修改标题内容，从1行改成3行，你会看到摘要自动下移，整个卡片高度也跟着拉伸，完美适配。

内容的提问来源于stack exchange，提问作者Kevin Nugent