---
title: "Flow Builder 界面"
description: "Flow Builder 界面与工作区概览。"
---

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

## 项目控件与常用快捷键（顶部工具栏）\{#project-controls-and-useful-shortcuts-top-toolbar\}

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

工作区中央区域模拟你的流程在移动设备上的实际显示效果。
* 点击某个元素即可选中并编辑其属性。若要选中容器内的子元素，请先点击容器，再点击子元素。
* 若要编辑页面本身的属性，请点击所有元素以外的空白区域，或在 Screens and Layers 面板中选择该页面。
* 若要调整元素的排列顺序，请在 Screens and Layers 面板中上下拖动对应条目。
:::warning
流程编辑器旨在创建响应式布局。因此，您**无法手动更改元素的位置**——只能更改它们的顺序。每个容器的布局设置决定了其中元素的排列方式。
:::
### 设备预览上方的活动屏幕工具栏 \{#active-screen-bar-above-the-device-preview\}

- **Screen name** — 显示当前屏幕名称的标签。
- **Toggle animations** Toggle animations — 开启或关闭元素动画预览；开启后动画会持续播放，直到手动关闭。仅在当前屏幕包含至少一个[动画](builder-styling#animation)时显示。不影响真机上的动画效果。
- **Add element** Plus — 在当前屏幕打开[元素库](builder-elements)。等同于"屏幕与图层"面板顶部的 **+** 按钮——在面板折叠时尤为实用。
### 查看控件（底部工具栏）\{#view-controls-bottom-toolbar\}

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

* **Device**：从可用的 iPhone 和 Android 手机型号中选择一款，以更改视口尺寸和设备外观。
* **Screen orientation**：在竖屏 Portrait 和横屏 Landscape 模式之间切换，预览不同方向下的流程效果。
* **Color scheme**：在浅色 Light mode 和深色 Dark mode 模式之间切换，查看设计在不同主题下的适配效果。
* **Locale**：选择语言区域，预览本地化内容下的流程效果。
* **View options**：开启或关闭设备边框和安全区域参考线。
## 屏幕与元素属性（右侧面板）\{#screen-and-element-properties-right-panel\}
### 屏幕设置与布局 \{#screen-settings-and-layout\}

:::link
主要文章：[屏幕与图层](paywall-layout-and-products)
:::

未选中任何元素时，右侧面板允许你调整当前[流程屏幕](paywall-layout-and-products)的属性，包括以下内容：

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

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

#### 设计属性 \{#design-properties\}

:::link
了解更多：[元素定位](manage-paywall-ui-elements)，[元素样式](builder-styling)
:::

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

:::link
了解更多：[操作](onboarding-actions)，[导航与交互](onboarding-navigation-branching)
:::

**Interactions** 选项卡用于定义用户与所选元素交互时会发生什么。每个交互由一个**触发器**和一个或多个**操作**组成：
* **触发器**定义*何时*发生某件事——例如，**On Tap**（用户点击该元素）。
* **动作**定义*发生什么*——例如，跳转到另一个页面或修改某个变量的值。可以为同一个触发器添加多个动作，使它们按顺序依次执行。

可以为同一个元素添加多个触发器，从而按顺序执行多个动作。
## 左侧面板 \{#left-panel\}

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

* [屏幕与图层](#screens-and-layers)
* [添加元素](#element-selection)
* [产品](#products)
* [样式](#saved-styles)
* [变量](#variables)
* [本地化](#localization)
### 屏幕与图层 \{#screens-and-layers\}

:::link
主要文章：[屏幕与图层](paywall-layout-and-products)
:::

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

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

:::link
主要文章：[元素](builder-elements)
:::

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

:::link
主要文章：[产品](paywall-product-block)
:::

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

该列表为只读模式。若要为屏幕分配产品，请添加一个产品元素并在右侧面板中进行配置。若要创建或编辑产品，请使用 Adapty 看板中的 **Products** 页面。
### 已保存的样式 \{#saved-styles\}

:::info
了解更多：
- [元素样式设置](builder-styling)
- [文本内容](onboarding-text)
- [深色模式](paywall-dark-mode)
:::

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

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

:::link
主要文章：[变量](onboarding-variables)
:::

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

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

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

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

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

:::link
主要文章：[本地化](add-paywall-locale-in-adapty-paywall-builder)
:::

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

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