---
title: "布局元素：容器、轮播图和底部抽屉"
description: "在 Flow Builder 中将元素分组为堆叠、轮播图和底部抽屉。"
---

布局元素用于将其他元素组合在一起，并控制它们在屏幕上的排列方式。

Flow Builder 包含四种布局元素类型：
- **堆栈（Stacks）**：沿轴方向排列子元素，支持垂直或水平布局
- **轮播（Carousel）**：可滑动的容器，每次显示一张幻灯片
- **底部弹出面板（Bottom Sheet）**：从屏幕底部滑出的面板，叠加显示在底层内容之上
- **分隔线（Dividers）**：用于分隔行或列的细线

:::link
**标签页（Tabs）** 也属于此类组件，但单独成文。详见 [标签页](builder-tabs)。
:::
## 堆叠容器 \{#stacks\}

:::link
主要文章：[元素定位](manage-paywall-ui-elements)
:::

堆叠容器可以将元素按垂直或水平方向分组。**Vertical Stack** 将元素排列为行；**Horizontal Stack** 将元素排列为列。

:::tip
将堆叠容器相互嵌套，可以构建更复杂的布局。
:::
### 更改堆叠方向 \{#change-stack-direction\}

堆叠的方向并不是固定的。你可以随时在右侧面板的 **Layout** 区域中切换 **Vertical**、**Horizontal** 和 **Free** — 无需删除再重建容器。

间距、对齐方式和分布方式也在同一个 **Layout** 区域中配置。子元素按照 **Layers** 面板中的顺序渲染 — 拖拽即可调整顺序。
### 包装与解包 \{#wrap-and-unwrap\}

要将现有元素转换为堆叠，选中该元素后使用 **Wrap** [图层操作](paywall-layout-and-products#layer-actions)。然后从 **Layers** 面板将其他元素拖入新建的堆叠中。若要移除堆叠并将其子元素提升一级，请使用 **Unwrap**。
## 轮播图 \{#carousel\}

**轮播图**是一种可滑动的容器，每次只显示一张幻灯片。用户可以横向滑动切换到下一张，也可以设置定时自动播放。

轮播图包含一组**幻灯片**图层。当某张幻灯片处于激活状态时，该图层上的元素就会显示在屏幕上。
与 Tabs 不同，轮播图的当前滑动项不会作为[可选组](flow-selectable-elements)暴露出来——滑动项无法在条件或动态文本中引用。请将 Carousel 用于视觉轮播展示，而非用户驱动的分支逻辑。
### 切换当前幻灯片 \{#change-active-slide\}

选中轮播组件后，编辑工具会在顶部显示一个弹出控制栏，其中包含 **Slide** 下拉菜单和 **+ Add Slide** 按钮。

- 点击 **+ Add Slide** 可添加一张新的空白幻灯片。
- 使用 **Slide** 下拉菜单切换画布上的当前幻灯片——也可以直接在 **Layers** 面板中点击对应的幻灯片图层。

如需调整幻灯片顺序，在 Layers 面板中将其拖拽到轮播组件内的目标位置即可。

{/* TODO: on-device GIF */}
### 属性 \{#properties\}

#### 自动滚动 \{#auto-scroll\}

自动滚动会自动循环切换幻灯片——用户无需手动滑动即可查看所有内容。

以下两个时间控制项决定其行为：

- **Delay** — 每张幻灯片的停留时长（毫秒）。
- **Duration** — 幻灯片之间过渡动画的持续时长（毫秒）。

#### 轮播尺寸 \{#carousel-sizing\}
专用控件用于确定轮播图的尺寸以及相邻幻灯片之间的间距。将 **Height** 设置为 **Fixed**，这样当用户在内容长度不同的幻灯片之间滑动时，布局不会发生偏移。

#### 幻灯片尺寸 \{#slide-sizing\}

每张幻灯片的 **Width** 和 **Height**。默认为 Fill，即每张幻灯片跟随轮播图的尺寸。设置固定宽度可以创建"窥视"效果，使相邻幻灯片部分可见。

#### 圆点指示器 \{#dots\}

轮播底部的页面指示器，用于告知用户共有多少张幻灯片以及当前激活的是哪一张。

关闭 **Show dots** 开关可隐藏幻灯片指示器。指示器可见时，以下属性用于控制其外观：
- **Color** — 未激活圆点的填充颜色。
- **Active Color** — 当前可见幻灯片对应圆点的填充颜色。
- **Size** — 每个圆点的直径，单位为像素。
- **Gap** — 相邻圆点之间的间距。
- **Padding** — 圆点行与上方轮播内容之间的间距。
## 底部弹出面板 \{#bottom-sheet\}

:::link
操作指南：[在底部弹出面板中展示所有方案](show-plans-bottom-sheet)
:::

**底部弹出面板（Bottom Sheet）**是一种从屏幕底部向上滑出的布局面板，会覆盖在底层内容之上。

该面板始终会对背后的内容应用模糊效果，且无法关闭。建议通过点击触发它——例如绑定在 **Show all plans** 链接后面——而不是在页面加载时自动弹出。
### 结构 \{#structure\}

底部弹窗包含两个顶级层：

- **Heading** — 位于弹窗顶部的堆叠层，预置了 **Title** 文字层和 **Close button** Close。可按需编辑或删除。
- **Content** — 主容器。可在其中放入产品、按钮、链接或其他任意元素。

{/* TODO: on-device GIF */}
### 初始可见性 \{#initial-visibility\}

默认情况下，底部弹出层在屏幕渲染后会立即显示。如需改为按需打开，请按以下步骤操作：

1. **先完成弹出层内容的编辑** — 隐藏状态下的图层无法编辑，因此在内容填充完毕之前，弹出层必须保持可见。
2. 在 **Layers** 面板中，选择底部弹出层。
3. 将 **Visibility** 设置为 **Hide** Hide。

弹出层仍保留在图层树中，但不再在屏幕上渲染。

### 触发底部弹窗 \{#triggering-the-bottom-sheet\}

要打开隐藏的底部弹窗，需将 **Show** 操作绑定到另一个元素上：

1. 选中触发元素（例如按钮或文本链接）。
2. 在右侧面板中打开 **Interactions** 标签页。
3. 点击 **Add trigger** > **On tap**，然后点击 **Add action**。
4. 将 **Action** 设置为 **Show**，并从下拉菜单中选择对应的底部弹窗。

## 分割线 \{#dividers\}

**水平分割线**和**垂直分割线**是用于分隔内容的细线。水平分割线用于分隔行，垂直分割线用于分隔水平堆叠中的列。可在右侧面板中调整粗细、颜色和长度。