使用堆叠创建动态设计

Adobe XD 中的堆叠使组中的对象能够定义它们之间的固定空间。您在堆叠中调整对象的大小、对其重新排序或修改对象时，XD 会自动保留对象之间已定义的空间。 

堆叠与填充和响应式调整大小相结合，可成为功能强大的组合，在设计中加强控制并提升速度。堆叠可轻松地应用于组件，并对按钮、菜单、下拉列表和基于卡片的布局进行自动布局和编辑。

确保您熟悉内容识别布局的基础知识：

• 组件
• 响应式调整大小和约束
• 组件和组的内边距

限制

在开始使用堆叠之前，请了解以下限制：

• 如果您将鼠标悬停在处于悬停状态且不断扩大的元素上，背景不会调整大小以适应新状态且堆叠中的元素不会被推开。
• 组件不能充当填充和堆叠的背景。而应创建一个同时包含内容和背景的组件。
• 您不能：
  • 将特殊组转换为蒙版或将布尔组转换为堆叠。
  • 按堆叠方向调整堆叠大小。
  • 选择堆叠元素和堆叠外的元素。

启用堆叠

XD 会根据组或组件的结构自动确定堆叠方向。但是，如果要更改堆叠方向，请在“属性检查器”的“堆叠”选项中选择“垂直”或“水平”。 

使用组件时，仅主组件提供“堆叠方向”控件。

启用堆叠时会发生什么情况？

编辑堆叠元素

创建堆叠元素后，请使用以下“任意”选项对其进行编辑：

移动元素或使用“对齐”选项                                                     调整堆叠中对象和文本的大小

编辑对象之间的间距                                                                   调整堆叠中的间距

使堆叠中的间距一致                                                                        复制堆叠中的元素

对堆叠元素重新排序

创建和修改堆叠元素后，请使用以下“任意”选项对其进行重新排序：

创建或修改堆叠背景

创建堆叠时，XD 会自动确定背景。但是，当您在组或组件上启用堆叠时，位于堆叠中最低位置且与其内容重叠的图层或组将成为其背景。

XD 不支持组件实例作为背景。

要创建和修改堆叠背景，请执行以下步骤：

1. 在堆叠中创建一个形状或组，充当堆叠背景。您还可以在堆叠外部创建背景并将其复制到堆叠组中。
2. 从堆叠中，选择要用作背景的元素。
3. 右键单击并选择“设为背景”或“替换背景”。所选元素将移动到堆叠的最后一个位置，并将调整大小以适合堆叠和填充值的大小。
   

对堆叠元素进行更多操作

您已经学习了如何创建和使用堆叠，以下内容将进一步介绍如何使用堆叠：

嵌套并重新排列堆叠

当相互嵌套堆叠时（例如，将水平堆叠嵌入垂直堆叠中），您可以实现良好定义且易于编辑的布局。您可以嵌套不限数量的堆叠。观看动画演示，了解嵌套堆叠的工作原理。 

组件和状态中的堆叠

您可以在组件中应用堆叠和填充，以在设计系统的上下文中定义可重用的 UI 元素。使用需要标签或行更新的组件时，堆叠的使用会使组件的布局对更改做出响应并自动执行手动布局工作。例如，如果有多个有内容覆盖的堆叠，则您可以使用堆叠对空间进行全局编辑和管理。无需再手动编辑每张信息卡！

应用于主组件的堆叠将自动应用于其所有实例和状态。您还可以创建包含堆叠的链接组件并对其进行编辑。 

覆盖在堆叠中的如何表现？

了解详情

“结合内边距和响应式调整大小，当您在设计系统内操作时，可实现强大的功能组合。在主组件上使用堆叠时，该组件的任何实例都需符合相关堆叠结构。”— XD 首席产品经理 Dani Beaumont 表示。

如需详细了解如何在组件和组中使用堆叠，请观看此视频。

观看时长：1 分钟。

接下来学什么？

您已经了解如何使用堆叠定义元素之间的空间。您可以进一步学习如何创建交互式原型，并与设计人员或利益相关者共享这些原型，以获取相关反馈。

有疑问或想法？