有问题要问或要分享想法？ 欢迎加入 Adobe XD 社区。 我们很乐意倾听您的心声并欣赏您的创意作品！
上次更新日期：
2023年2月6日
了解如何使用 Adobe XD 中的堆叠创建可对内容更改做出响应的动态布局。
Adobe XD 中的堆叠使组中的对象能够定义它们之间的固定空间。 您在堆叠中调整对象的大小、对其重新排序或修改对象时，XD 会自动保留对象之间已定义的空间。
堆叠与填充和响应式调整大小相结合，可成为功能强大的组合，在设计中加强控制并提升速度。 堆叠可轻松地应用于组件，并对按钮、菜单、下拉列表和基于卡片的布局进行自动布局和编辑。
继续操作之前
确保您熟悉内容识别布局的基础知识：
限制
在开始使用堆叠之前，请了解以下限制：
- 如果您将鼠标悬停在处于悬停状态且不断扩大的元素上，背景不会调整大小以适应新状态且堆叠中的元素不会被推开。
- 组件不能充当填充和堆叠的背景。 而应创建一个同时包含内容和背景的组件。
- 您不能：
- 将特殊组转换为蒙版或将布尔组转换为堆叠。
- 按堆叠方向调整堆叠大小。
- 选择堆叠元素和堆叠外的元素。
启用堆叠
您可以在启用了响应式调整大小的组或组件上启用堆叠。 在属性检查器的响应式调整大小控件中，选中堆叠
复选框。
复选框。
XD 会根据组或组件的结构自动确定堆叠方向。 但是，如果要更改堆叠方向，请在“属性检查器”的“堆叠”选项中选择“垂直”或“水平”。
注释
使用组件时，仅主组件提供“堆叠方向”控件。
启用堆叠时会发生什么情况？
启用堆叠时，XD 会执行以下操作：
- 自动识别背景（“图层”面板中位于底部的组或形状，与组中的所有对象在画布上重叠）；
- 启用和计算填充值；
- 确定堆叠方向：“垂直”或“水平”；
- 对重叠的元素进行分组以保留布局；并
- 定义和固定元素之间的间距值。
编辑堆叠元素
创建堆叠元素后，请使用以下“任意”选项对其进行编辑：
移动元素或使用“对齐”选项 调整堆叠中对象和文本的大小
自由移动元素或在与堆叠方向相反的堆叠元素上使用“对齐”工具。
选择要调整大小的对象，堆叠中的其他对象会自动移动以保留对象间的相对间距。 使用自动调整高度文本可动态调整堆叠中文本的高度，而不改变其宽度。
编辑对象之间的间距 调整堆叠中的间距
选择堆叠组或组件中的对象，并将鼠标悬停在空格上。 粉红色突出显示表示堆叠中对象之间的间距。 单击并拖动突出显示部分即可编辑对象之间的间距。
选择整个堆叠并按住键盘上的 S 键可调整堆叠中的间距。 您还可以使用 S 编辑填充。
使堆叠中的间距一致 复制堆叠中的元素
拖动并使用 Shift 或 Shift + S（当您要选择的元素在堆叠外部时）。
使用 Cmd+D 复制堆叠中的元素并将其放在选定元素下。
对堆叠元素重新排序
创建和修改堆叠元素后，请使用以下“任意”选项对其进行重新排序：
- 选择堆叠元素，并在画布上沿着堆叠方向拖动它们。
- 使用 Cmd+] 和 Cmd+[ 在堆叠中上下移动，使用 Cmd+Shift+] 和 Cmd+Shift+[ 将选中的元素移到堆叠中的第一个或最后一个。 上下文（右键单击）菜单中也提供这些命令。
- 堆叠元素的新位置用粉红色框突出显示。 要在重新排序时保持对齐，需按住 shift 键将堆叠元素锁定在拖动方向上，并保留其原始对齐方式。
创建或修改堆叠背景
创建堆叠时，XD 会自动确定背景。 但是，当您在组或组件上启用堆叠时，位于堆叠中最低位置且与其内容重叠的图层或组将成为其背景。
注释
XD 不支持组件实例作为背景。
要创建和修改堆叠背景，请执行以下步骤：
- 在堆叠中创建一个形状或组，充当堆叠背景。 您还可以在堆叠外部创建背景并将其复制到堆叠组中。
- 从堆叠中，选择要用作背景的元素。
- 右键单击并选择“设为背景”或“替换背景”。 所选元素将移动到堆叠的最后一个位置，并将调整大小以适合堆叠和填充值的大小。
对堆叠元素进行更多操作
您已经学习了如何创建和使用堆叠，以下内容将进一步介绍如何使用堆叠：
嵌套并重新排列堆叠
当相互嵌套堆叠时（例如，将水平堆叠嵌入垂直堆叠中），您可以实现良好定义且易于编辑的布局。 您可以嵌套不限数量的堆叠。 观看动画演示，了解嵌套堆叠的工作原理。
组件和状态中的堆叠
您可以在组件中应用堆叠和填充来在设计系统的上下文中定义可重用的 UI 元素。 使用需要标签或行更新的组件时，堆叠的使用会使组件的布局对更改做出响应并自动执行手动布局工作。 例如，如果有多个有内容覆盖的堆叠，则您可以使用堆叠对空间进行全局编辑和管理。 无需再手动编辑每张信息卡！
应用于主组件的堆叠将自动应用于其所有实例和状态。 您还可以创建包含堆叠的链接组件并对其进行编辑。
覆盖在堆叠中的如何表现？
- 当您在实例或状态中手动编辑堆叠的两个元素之间的空间时，会出现空间覆盖。 如果修改主组件中的空间，则更改不会应用于实例或状态。
- 实例可以在元素上具有内容或布局覆盖，如较大区域的文本。 这些实例仍然可以与主实例之间的填充值或空格同步。
了解详情
“结合内边距和响应式调整大小，当您在设计系统内操作时，可实现强大的功能组合。 当主组件使用堆叠时，该组件的任何实例都会遵守该堆叠结构。"— Dani Beaumont，XD 主体产品经理。
如需详细了解如何在组件和组中使用堆叠，请观看此视频。
观看时长：1 分钟。
接下来学什么？
您已经了解如何使用堆叠定义元素之间的空间。 您可以进一步学习如何创建交互式原型，并与设计人员或利益相关者分享这些原型，以获取相关反馈。
有疑问或想法？
