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

Flow Builder 包含五种布局元素类型：

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

容器

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

更改容器方向

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

间距、对齐和分布均可在同一 Layout 区域中配置。子元素按照它们在 Layers 面板中的顺序进行渲染——拖拽即可调整顺序。

包装与解包

要将现有元素转换为容器，请选中该元素，然后使用 Wrap 图层操作。从 Layers 面板中将其他元素拖入新容器。若要移除容器并将其子元素提升一级，请使用 Unwrap。

轮播图

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

轮播图由一组幻灯片图层组成。当某张幻灯片处于激活状态时，该图层上的元素就会显示在屏幕上。 与 Tabs 不同，轮播图的当前幻灯片不会作为可选组公开——幻灯片无法在条件或动态文本中被引用。轮播图适合用于视觉轮播展示，而非用户驱动的分支逻辑。

切换当前幻灯片

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

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

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

属性

自动滚动

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

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

• Delay — 每张幻灯片的停留时长（毫秒）。
• Duration — 幻灯片切换动画的持续时长（毫秒）。

轮播图尺寸

专用控件用于设置轮播组件的尺寸以及相邻幻灯片之间的间距。将 Height 设为 Fixed，可防止用户在内容长度不同的幻灯片之间滑动时布局发生偏移。

幻灯片尺寸

每张幻灯片的 Width 和 Height。默认值为 Fill，即每张幻灯片跟随轮播组件的尺寸变化。设置固定宽度可实现”窥视”效果，使相邻幻灯片部分可见。

指示点

轮播图底部的页面指示器，显示幻灯片总数及当前激活的幻灯片。

关闭 Show dots 开关可隐藏幻灯片指示器。指示器显示时，以下属性控制其外观：

• Color — 未激活圆点的填充颜色。
• Active Color — 当前可见幻灯片对应圆点的填充颜色。
• Size — 每个圆点的直径，单位为像素。
• Gap — 相邻圆点之间的间距。
• Padding — 圆点行与上方轮播内容之间的间距。

底部弹出面板

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

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

结构

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

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

初始可见性

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

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

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

触发底部弹窗

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

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

页脚

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

与普通元素不同，页脚会延伸到设备底部安全区域：其背景色会一直铺到屏幕边缘。 每个屏幕只允许有一个页脚。您不能复制已有的页脚，也不能新增页脚。

底部栏与普通固定元素的区别

两者都会在内容滚动时保持在屏幕上。根据你的需求选择合适的方案：

• 使用 Footer（底部栏） 放置页面主要底部内容（CTA 按钮、法律文字、链接）。它会自动预留自身高度，确保内容始终可以滚动到其上方而不被遮挡，并自动处理底部安全区域。
• 使用固定元素 放置需要悬浮在滚动内容上方的控件（而非预留空间），或固定在非底部边缘的控件——例如浮动关闭/恢复按钮、顶部常驻横幅、返回顶部按钮。此类元素的安全区域间距需要你自行管理。

分隔线

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