Flow Builder 主界面包含添加视觉元素、编辑属性以及调整用户流程逻辑所需的全部工具。本文介绍界面各区域的功能及位置。

项目控件与常用快捷键（顶部工具栏）

• Close Close：退出流程编辑器，返回流程列表页面。
• App name App：显示该流程所属的应用。
• All flows Flows：打开该应用的所有流程列表。
• Rename the flow：点击流程名称旁的铅笔图标 Pencil 对流程进行重命名。
• View mode toggle：在设计视图 Cursor 与远程配置视图Remote Config 之间切换。
• Undo/Redo：点击箭头图标撤销 Undo 或重做 Redo 流程中的更改。也可使用 ⌘Z / Ctrl+Z 执行撤销操作。
• Save draft / Publish：点击 Save draft 保存进度但不发布（⌘ / Ctrl+S）。展开下拉菜单 Open dropdown 可访问 Publish 按钮。流程只有在发布后才能添加到版位中。

预览区域（中央）

工作区中央区域模拟你的流程在移动设备上的实际显示效果。

• 点击某个元素即可选中并编辑其属性。若要选中容器内的子元素，请先点击容器，再点击子元素。
• 若要编辑页面本身的属性，请点击所有元素以外的空白区域，或在 Screens and Layers 面板中选择该页面。
• 若要调整元素的排列顺序，请在 Screens and Layers 面板中上下拖动对应条目。

设备预览上方的活动屏幕工具栏

• Screen name — 显示当前屏幕名称的标签。
• Toggle animations Toggle animations — 开启或关闭元素动画预览；开启后动画会持续播放，直到手动关闭。仅在当前屏幕包含至少一个动画时显示。不影响真机上的动画效果。
• Add element Plus — 在当前屏幕打开元素库。等同于”屏幕与图层”面板顶部的 + 按钮——在面板折叠时尤为实用。

查看控件（底部工具栏）

底部工具栏中的工具用于控制预览效果。

• Device：从可用的 iPhone 和 Android 手机型号中选择一款，以更改视口尺寸和设备外观。
• Screen orientation：在竖屏 Portrait 和横屏 Landscape 模式之间切换，预览不同方向下的流程效果。
• Color scheme：在浅色 Light mode 和深色 Dark mode 模式之间切换，查看设计在不同主题下的适配效果。
• Locale：选择语言区域，预览本地化内容下的流程效果。
• View options：开启或关闭设备边框和安全区域参考线。

屏幕与元素属性（右侧面板）

屏幕设置与布局

未选中任何元素时，右侧面板允许你调整当前流程屏幕的属性，包括以下内容：

• 与系统 UI 的交互（例如是否显示状态栏）
• 自动布局规则
• 背景（颜色、图片或视频）
• 内边距大小
• 垂直滚动行为 如果界面包含某些元素（例如互动问卷），此列表将扩展并显示相关属性。

元素属性

选中某个元素后，右侧面板允许你修改其样式和交互属性。

设计属性

Design 标签页用于配置所选元素的视觉外观和布局：

• Visibility（可见性）：显示或隐藏元素。启用 Conditional 可见性可设置规则，控制元素何时显示。
• Position（位置）：在 Relative、Absolute 或 Fixed 定位方式之间选择。
• Content（内容）（仅限文本元素）：编辑元素的文本内容、插入变量并管理本地化。
• Typography（排版）（仅限文本元素）：配置字体、字重、字号、颜色、对齐方式、修饰效果和截断方式。
• Spacing（间距）：设置元素的外边距和内边距。
• Effects（效果）：添加投影、内阴影、背景模糊或图层模糊。
• Animation（动画）：添加动画效果（例如 Pulse），并配置其时长和强度。
• Appearance（外观）：调整不透明度和旋转角度。
• Layout（布局）：选择布局方向（纵向或横向），并设置子元素的分布方式。

交互属性

Interactions 选项卡用于定义用户与所选元素交互时会发生什么。每个交互由一个触发器和一个或多个操作组成：

• 触发器定义何时发生某件事——例如，On Tap（用户点击该元素）。
• 动作定义发生什么——例如，跳转到另一个页面或修改某个变量的值。可以为同一个触发器添加多个动作，使它们按顺序依次执行。

可以为同一个元素添加多个触发器，从而按顺序执行多个动作。

左侧面板

左侧面板的功能会根据当前激活的按钮而变化。你可以在以下选项中切换：

• 屏幕与图层
• 添加元素
• 产品
• 样式
• 变量
• 本地化

屏幕与图层

点击图层 Layers 按钮，即可打开屏幕与图层面板（打开流程编辑器时默认显示）。

该面板以树形结构展示每个屏幕的图层。屏幕上的每个元素都是一个图层，容器（如堆栈）的子元素会嵌套其中。你可以通过拖放来调整图层顺序。

元素选择

点击加号 Plus 按钮后，左侧面板会显示可用 UI 元素及其变体列表。点击某一条目，即可将其作为新图层添加到当前屏幕。

产品

产品 Products 按钮会打开产品列表，显示流程中每个屏幕所分配的产品。

该列表为只读模式。若要为屏幕分配产品，请添加一个产品元素并在右侧面板中进行配置。若要创建或编辑产品，请使用 Adapty 看板中的 Products 页面。

已保存的样式

点击样式 Styles 按钮可打开已保存的样式。

在这里，你可以编辑和管理全局样式。如果流程中有多个元素使用了相同的字体排版或颜色，可以将这些数据保存为全局样式，之后只需单击一下即可复用。 目前，Flow Builder 支持两种全局样式——字体样式和颜色样式。每种颜色样式都可以为深色模式单独设置一个值。

变量

括号 Variables 按钮用于打开变量面板。

在这里，你可以创建和管理流程中的变量。运行时，SDK 会将变量占位符替换为实际值——用户属性、产品价格、本地化字符串等。

变量分为两个标签页：

• Custom（自定义）：通过操作创建和控制的变量。
• Elements（元素）：由用户交互决定的值——例如测验答案、开关状态或标签页选择。

产品变量（价格、名称及其他产品数据）不会显示在此面板中，请在编辑文本元素时直接引用它们。

变量的用途：

• 绑定文本：显示动态内容，而非静态字符串。
• 控制可见性：根据条件显示或隐藏元素（例如，为高级用户隐藏升级按钮）。
• 与用户交互：访问用户输入字段中的数据，例如表单或测验。

本地化

本地化视图可让你管理整个流程中所有可翻译的内容。它以表格形式展示每条文本字符串和图片，按屏幕分组，每个语言区域对应一列。在此视图中，你可以：

• 添加新语言区域，并直接在表格中编辑本地化字符串。
• 追踪翻译状态——每行都会标记为 Done 或 Missing。
• 按屏幕筛选，或仅显示缺失的翻译。
• 使用 AI Translate 自动翻译内容，或通过 Import/Export 批量导入/导出翻译。