---
title: "布局元素：容器、轮播图和底部弹窗"
description: "在流程编辑工具中将元素分组为容器、轮播图和底部弹窗。"
---

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

Flow Builder 包含五种布局元素类型：
- **容器（Containers）**：沿轴方向排列子元素——竖向或横向
- **轮播图（Carousel）**：可滑动的容器，每次显示一张幻灯片
- **底部弹窗（Bottom Sheet）**：从屏幕底部滑出的面板，叠加显示在底层内容之上
- **页脚（Footer）**：固定在屏幕底部、位于滚动区域之外的面板
- **分隔线（Dividers）**：用于分隔行或列的细线

:::link
**选项卡（Tabs）** 也属于此类，但有独立的文章介绍。详见 [选项卡](builder-tabs)。
:::
## 容器 \{#containers\}

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

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

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

容器的方向并非固定不变。你可以随时在右侧面板的 **Layout** 区域切换 **Vertical**、**Horizontal** 和 **Free** 模式，无需删除并重新创建容器。

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

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

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

轮播图由一组**幻灯片**图层组成。当某张幻灯片处于激活状态时，该图层上的元素就会显示在屏幕上。
与 Tabs 不同，轮播图的当前幻灯片不会作为[可选组](flow-selectable-elements)公开——幻灯片无法在条件或动态文本中被引用。轮播图适合用于视觉轮播展示，而非用户驱动的分支逻辑。
### 切换当前幻灯片 \{#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**，并从下拉菜单中选择对应的底部弹窗。

## 页脚 \{#footer\}

**页脚**是一个固定在屏幕底部的容器。它可以是任意高度，内容也不受限制，可以放一个按钮，也可以放多行文字。当屏幕其余部分滚动时，需要保持不动的内容（如 CTA 按钮、法律声明、链接）都适合放在页脚中。

与普通元素不同，页脚会延伸到设备底部安全区域：其背景色会一直铺到屏幕边缘。
每个屏幕只允许有一个页脚。您不能复制已有的页脚，也不能新增页脚。
### 底部栏与普通固定元素的区别 \{#footer-vs-a-regular-fixed-element\}

两者都会在内容滚动时保持在屏幕上。根据你的需求选择合适的方案：
- **使用 Footer（底部栏）** 放置页面主要底部内容（CTA 按钮、法律文字、链接）。它会自动预留自身高度，确保内容始终可以滚动到其上方而不被遮挡，并自动处理底部安全区域。
- **使用[固定元素](manage-paywall-ui-elements)** 放置需要悬浮在滚动内容上方的控件（而非预留空间），或固定在非底部边缘的控件——例如浮动关闭/恢复按钮、顶部常驻横幅、返回顶部按钮。此类元素的安全区域间距需要你自行管理。
## 分隔线 \{#dividers\}

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