Swift 堆栈

Swift Stack 组件提供了一个框架，用于简单到复杂、适应性强的设计。它使用网格显示属性，包含由 div 构成的单元格，这些单元格自动设置为 flex。此组件包含 8 种变体，可让您以不同的布局定位内容。此外，您还可以选择手动修改每个 Swift Stack 变体和 Swift Stack 单元格尺寸，以更精确地控制内容的呈现。Swift Stack 用途广泛，可用于组织各种类型的内容——从突出的部分到产品展示。

通过本教程，您将掌握：

1. 整合 Swift Stack 的方法
2. 设计 Swift Stack 的方法
3. 设置 Swift Stack 单元格样式的方法

整合 Swift Stack 的方法

您可以通过 添加面板 > 结构 区域。将 Swift Stack 拖放到 Webflow 画布上。画布上会出现一个预设菜单，您可以从 8 个 Swift Stack 变体中选择一个。

Swift Stack 变体

Swift Stack 提供了 8 种预设变体，每种变体都具有独特的单元结构：

• 单列 — 1 个单元格，跨越 1 列和 1 行 
• 双柱— 2 个单元格，每个单元格跨越 1 列和 1 行
• 三列— 3 个单元格，每个单元格跨越 1 列和 1 行
• 四列— 4 个单元格，每个单元格跨越 1 列和 1 行 
• 2 + 1— 3 个单元格。左列有 2 个单元格，每个单元格跨 1 列 1 行。右列有 1 个单元格，跨 1 列 2 行
• 1 + 2— 3 个单元格。左列中有 1 个单元格，横跨 1 列和 2 行。右列中有 2 个单元格，每个单元格横跨 1 列和 1 行
• 双人 2 x 2— 4 个单元格。左列有 2 个单元格，每个单元格跨 1 列 1 行。右列有 2 个单元格，每个单元格跨 1 列 1 行
• 格式化双精度 2 x 2 — 4 个单元格。顶行有 2 个单元格，左侧单元格跨 2 列 1 行，右侧单元格跨 1 列 1 行。底行有 2 个单元格，左侧单元格跨 1 列 1 行，右侧单元格跨 2 列 1 行

每个 Swift Stack 变体都有不同的用途。例如，您可以使用双列变体来突出部分 - 将文本放在右列，将图像放在左列。或者，您可以选择双 2 x 2 变体来制作响应式产品视觉效果展示。

设计 Swift Stack 的方法

您可以灵活地定制 Swift Stack 的网格布局、单元格间距和显示效果。默认情况下，Swift Stacks 的每个单元格与 Swift Stack 的父元素之间都有 20px 的边距。

• 在 Swift Stack 中合并或删除行或列的过程
• 自定义 Swift Stack 中单元格间距的方法
• 调整 Swift Stack 显示的方法
• 调整行和列尺寸的方法
• 跨不同断点设置 Swift Stack 样式的过程

在 Swift Stack 中添加或删除行或列的方法

您可以在 Swift Stack 中的 4 个位置添加或删除行或列：

• 在画布菜单内
• 在样式面板中
• 在编辑模式下
• Swift Stack 内部

在 Swift Stack 中添加行或列后，单元格数量将与现有行和/或列的数量一致。例如，如果您的 Swift Stack 包含 2 行 1 列单元格，并且您添加了一个新列，则现有单元格的右侧将添加 2 个单元格，形成单独的列。

注意： 在向 Swift Stack 中引入行或列时，添加的单元格数量与行和列的数量相对应 — 不是 单元格数量 — 目前存在的单元格数量。例如，如果您拥有一个 Swift Stack，其中包含 1 行中的 2 个单元格，其中一个单元格跨越 2 列，另一个单元格跨越 1 列，则添加另一行将导致 Swift Stack 中包含 3 个单元格。

删除行或列也会清除行/列单元格内的内容。

在画布菜单中将行或列附加到 Swift Stack

您可以通过右键单击 Swift Stack、将鼠标悬停在 添加列 或者 添加行，并选择包含列或行的位置（例如，左、右、上方或下方）。

在样式面板中包括或删除 Swift Stack 中的行或列

您可以通过选择“Swift Stack”并导航至 样式面板 > 布局 > 网格。随后，您可以通过单击“锁定”和“解锁”图标在 Swift Stack 中插入或删除列和行。

从 Swift Stack 中移除一行时，最底行的单元格将从 Swift Stack 中消除。从 Swift Stack 中移除一列时，最右侧列的单元格将从 Swift Stack 中消除。

在编辑模式下添加或清除 Swift Stack 中的行或列

您可以在 编辑模式 在画布上。选择 Swift Stack 元素并点击 编辑 Swift 堆栈 以启动编辑模式。要添加新的行和列，请单击右上角或左下角单元格旁边的“+”符号。可以通过点击单元格标题来删除行和列，然后选择 删除列 或者 删除行 在画布菜单中。

退出 编辑模式， 打 Esc键 或按 完毕 在画布上。

将行或列集成到 Swift Stack 内部的 Swift Stack

您可以在画布上的 Swift Stack 中直接插入行或列。要添加行或列，请选择 Swift Stack 单元格，将鼠标悬停在单元格顶部、底部、左侧或右侧的“蓝点”上，然后点击“+”符号。

自定义 Swift Stack 中单元格间距的方法

您可以增加或减少 Swift Stack 中单元格之间的边距（即元素的外部空间）。每个单元格之间的初始间隙为 20px，您可以修改此间距。

为了调节这个差距，导航到 样式面板 > 布局 > 差距。当“锁”图标处于启用状态时，列和行单元格的间隙值将统一。对于列和行单元格中的不同间隙大小，请解锁“锁”图标并自定义每个值。

符号并根据需要改变间距值。

您还可以通过访问来修改单元格之间的距离 编辑模式，将鼠标悬停在两个单元格之间的空间上，然后单击并拖动以增加或减少间隙。如果“锁”符号固定在 样式面板 > 布局 > 差距，则拖动时行距和列距值都会自适应为相同的值。如果“锁”符号解锁后，您只能调整当前单击和拖动的间隙（即行 或者 柱间隙值）。

自定义快速堆栈外观的指南

您可以通过选择“快速堆叠”并导航至 样式面板 > 布局 >  展示。在这里，您可以选择 展示 或者 隐藏 快速堆栈：

• 展示 - 显示快速堆栈
• 隐藏 — 隐藏快速堆栈

如果需要选择隐藏的快速堆栈，您可以在导航器中找到它。

行和列尺寸的样式设置技巧

默认情况下，每列的尺寸设置为 1 个小数单位 (FR)。每行的尺寸配置为自动，根据所包含的内容调整大小。

要修改 FR 尺寸或最小/最大尺寸，请转至 编辑模式，选择行标题或列标题，然后在画布菜单中调整尺寸。您还可以通过单击并拖动每行或列标题的边缘来微调尺寸 编辑模式。在编辑模式之外，可以通过选择一个单元格并拖动单元格边界上的调整大小手柄来调整尺寸。

在各种断点处设置快速堆栈样式的步骤

选择快速堆栈元素并切换断点时（从默认桌面断点）， 行 参数 样式面板 > 布局 > 网格 灰色显示，并引入新的“自动”值。Webflow 将自动填充 排 价值——基于 柱子 值已经到位 — — 以适合 Quick Stack 内的单元格数量。

有时，Quick Stack 的 展示 和 网格 风格中呈现出粉红色的线索 样式面板 > 布局 — 表明这些风格属于 独自 到当前断点上选定的元素。

快速堆栈单元格的样式设置技巧

除了桌面断点之外，你还可以通过选择画布上的单元格并访问来设置 Quick Stack 单元格的样式 样式面板 > 像元大小。您可以调整单元格以跨越 1 行或多列 尺寸。此外，您还可以修改 顺序 细胞。关于 顺序，您可以将单元格定位为第一个、最后一个，或者通过访问“三个披露点”并在 顺序 字段。请注意，若要设置单元格的自定义顺序值，您必须为快速堆栈中的所有其他单元格分配大于 0 的顺序值。

使用桌面断点时，您可以通过合并和取消合并单元格来管理单元格大小。

有时，细胞的 尺寸 和 顺序 款式显示粉红色指示 样式面板 > 像元大小 — 表明这些风格适用 只 到当前断点处选定的单元格。

笔记： 快速堆叠单元格默认使用 flexbox。

调整快速堆叠单元格间距的方法

您可以将填充（但不能将边距）合并到快速堆叠单元格中。如果您希望在单元格和父快速堆叠元素之间引入间距，则可以配置快速堆叠的单元格间距。

合并快速堆叠单元的方法

您可以将快速堆叠单元格与其左侧、右侧、上方或下方的单元格合并。需要注意的是，合并单元格时，合并单元格内的内容 进入 将被淘汰。

有两种方法可以合并快速堆叠单元格：

• 通过画布菜单— 右键单击要合并的单元格，将鼠标悬停在 合并单元格 在画布菜单中，选择合并单元格的方向（即上方、下方、右侧、左侧）
• 利用画布上的控件  — 选择要合并的单元格，将鼠标悬停在单元格右侧、左侧、上方或下方（取决于预期的合并方向）旁边的蓝点上，然后单击 合并单元格 图标

笔记： 只有当一个单元格与要合并的单元格大小相同或更大时，合并才是可行的。

取消合并快速堆叠单元的程序

有两种方法可以取消合并快速堆叠单元格：

• 通过画布菜单— 右键单击要取消合并的单元格并选择 取消合并单元格 在画布菜单中
• 通过样式面板 — 选择要取消合并的单元格，导航至 样式面板 > 像元大小，然后点击 取消合并单元格

笔记： 取消合并单元格后，合并的原始单元格的内容将不会恢复。