布局元素：容器、轮播图和底部抽屉
布局元素用于将其他元素组合在一起，并控制它们在屏幕上的排列方式。
Flow Builder 包含四种布局元素类型：
- 堆栈（Stacks）：沿轴方向排列子元素，支持垂直或水平布局
- 轮播（Carousel）：可滑动的容器，每次显示一张幻灯片
- 底部弹出面板（Bottom Sheet）：从屏幕底部滑出的面板，叠加显示在底层内容之上
- 分隔线（Dividers）：用于分隔行或列的细线
标签页（Tabs） 也属于此类组件，但单独成文。详见 标签页。
堆叠容器
主要文章：元素定位
堆叠容器可以将元素按垂直或水平方向分组。Vertical Stack 将元素排列为行；Horizontal Stack 将元素排列为列。
将堆叠容器相互嵌套，可以构建更复杂的布局。
更改堆叠方向
堆叠的方向并不是固定的。你可以随时在右侧面板的 Layout 区域中切换 Vertical、Horizontal 和 Free — 无需删除再重建容器。
间距、对齐方式和分布方式也在同一个 Layout 区域中配置。子元素按照 Layers 面板中的顺序渲染 — 拖拽即可调整顺序。
包装与解包
要将现有元素转换为堆叠，选中该元素后使用 Wrap 图层操作。然后从 Layers 面板将其他元素拖入新建的堆叠中。若要移除堆叠并将其子元素提升一级，请使用 Unwrap。
轮播图
轮播图是一种可滑动的容器，每次只显示一张幻灯片。用户可以横向滑动切换到下一张，也可以设置定时自动播放。
轮播图包含一组幻灯片图层。当某张幻灯片处于激活状态时，该图层上的元素就会显示在屏幕上。 与 Tabs 不同，轮播图的当前滑动项不会作为可选组暴露出来——滑动项无法在条件或动态文本中引用。请将 Carousel 用于视觉轮播展示，而非用户驱动的分支逻辑。
切换当前幻灯片
选中轮播组件后，编辑工具会在顶部显示一个弹出控制栏，其中包含 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
Close。可按需编辑或删除。 - Content — 主容器。可在其中放入产品、按钮、链接或其他任意元素。
初始可见性
默认情况下，底部弹出层在屏幕渲染后会立即显示。如需改为按需打开，请按以下步骤操作：
- 先完成弹出层内容的编辑 — 隐藏状态下的图层无法编辑，因此在内容填充完毕之前，弹出层必须保持可见。
- 在 Layers 面板中，选择底部弹出层。
- 将 Visibility 设置为 Hide
Hide。
弹出层仍保留在图层树中，但不再在屏幕上渲染。
触发底部弹窗
要打开隐藏的底部弹窗，需将 Show 操作绑定到另一个元素上：
- 选中触发元素（例如按钮或文本链接）。
- 在右侧面板中打开 Interactions 标签页。
- 点击 Add trigger > On tap，然后点击 Add action。
- 将 Action 设置为 Show，并从下拉菜单中选择对应的底部弹窗。
分割线
水平分割线和垂直分割线是用于分隔内容的细线。水平分割线用于分隔行，垂直分割线用于分隔水平堆叠中的列。可在右侧面板中调整粗细、颜色和长度。