界面与图层
一个流程由一个或多个界面组成。每个界面代表用户旅程中的一个步骤——例如付费墙、问卷或产品介绍页。
每个界面上的元素按图层层级进行组织。 要管理屏幕、图层和元素，请打开默认的 Screens and Layers 视图。它将显示你的屏幕序列以及每个屏幕的图层结构。
管理屏幕
左侧面板的顶部区域列出了流程中的所有屏幕，每个条目显示一个编号标签和缩略图预览。
- 选择页面：点击某个页面条目将其激活。可视化编辑器会显示所选页面，下方的图层部分也会随之更新，展示该页面的图层层级。
- 添加页面：点击页面部分顶部的 按钮，向流程中添加一个新的空白页面。
- 打开模板库：点击页面部分顶部的 按钮，浏览并应用流程模板。
- 调整页面顺序：拖放页面条目以更改其在流程中的排列顺序。
如果你的流程中存在未使用的空白屏幕，将无法发布。请在发布前删除所有草稿屏幕。
屏幕操作
点击屏幕条目上的三点图标 可打开上下文菜单。
| 操作 | 快捷键 | 说明 |
|---|---|---|
| 播放动画 | 预览此屏幕上配置的动画 | |
| 复制 | ⌘C / Ctrl+C | 将屏幕复制到剪贴板 |
| 粘贴到此处 | ⌘V / Ctrl+V | 粘贴之前复制的屏幕 |
| 复制副本 | ⌘D / Ctrl+D | 创建屏幕的副本并添加到流程中 |
| 重命名 | 修改屏幕的显示名称 | |
| 删除 | ⌘⌫ / Ctrl+Del | 从流程中移除该屏幕 |
剪贴板内容在不同流程之间保持有效。你可以从一个流程中复制屏幕或元素，打开另一个流程后直接粘贴。
在屏幕之间导航
主要文章：导航与交互
列表中屏幕的顺序本身并不决定导航方式。如需连接屏幕，请使用元素交互：将按钮配置为跳转到另一个屏幕。
屏幕设置
要查看当前屏幕的属性和设置，请点击屏幕预览中的空白区域，右侧面板将切换到屏幕设置视图。
系统界面
控制屏幕与设备硬件的交互方式。
- Safe area 添加内边距，使内容避开刘海和系统状态栏区域。
- Status bar 控制系统状态栏（时间、电量、信号图标）的显示与隐藏。
在进度指示器中包含当前屏幕
如果你在流程中添加了进度指示器元素，Adapty 会在每个屏幕上显示它。
取消勾选 Include screen in progress indicator，可将某个特定屏幕从进度指示器中移除。适用于欢迎屏幕、最终付费墙，或任何你不希望计入进度的步骤。
屏幕布局
完整文章：布局与定位
Layout 部分决定屏幕如何排布其子元素。这些属性适用于任意容器元素。
-
Free：子元素独立定位。
-
Vertical：元素从上到下排列，类似 flexbox 列方向。
-
Horizontal：元素从左到右排列，类似 flexbox 行方向。 对于垂直和水平布局，你还可以配置间距和对齐方式。
-
Alignment：元素沿交叉轴的位置。
-
Gap：相邻元素之间的间距。
-
Distribution：子元素之间及周围空间的分布方式。
RTL 布局
勾选 Mirror for RTL 复选框，可为从右向左书写的语言镜像布局。水平容器中的元素顺序将会翻转。
屏幕背景
主要文章：背景
Fill 用于将屏幕背景设置为纯色、渐变、图片或视频。背景会填满整个设备视口，包括刘海和系统状态栏后面的区域——即使启用了 Safe area 也不例外。
循环播放背景视频
启用 Loop 开关，可让背景视频持续循环播放。
自定义媒体 ID
与任何图片或视频一样，您可以为屏幕背景分配自定义媒体 ID，以便在 SDK 中引用它。
屏幕间距
调整屏幕四侧（上、右、下、左）的内边距。
滚动
控制溢出行为。启用 Vertical scroll 可在屏幕内容超出视口高度时允许滚动。
可选组
主要文章：可选元素与组
Selectable groups 部分列出了当前屏幕上的所有可选组——来自测验、产品、标签页、试用切换或任意自定义可选元素。
点击某个组条目可对其重命名、更改类型、查看其公开的变量或将其删除。
管理图层
屏幕上的每个元素都以图层的形式呈现。图层面板显示当前屏幕上各元素的排列顺序。
Flow 中的图层不像图形设计软件中的图层那样相互叠加。它们代表的是屏幕上各个独立的组件。只有当元素使用绝对定位或固定定位时，才会发生叠加。叠加顺序由 z-index 属性决定，而非图层树中的位置。
树状结构反映了父子层级关系。点击任意父层级上的箭头可展开或折叠其子层级。
您无法直接创建层级。通过添加元素视图添加的每个元素都会作为新层级显示在树中。
- 选择图层：点击图层即可选中它。可视化编辑器会在画布上高亮显示对应元素，右侧面板则展示其设计和交互属性。
- 调整图层顺序：在树状结构内拖放图层，改变其在父容器中的排列顺序。树中的顺序与屏幕上的视觉顺序一致。
- 显示或隐藏图层：将鼠标悬停在图层上，右侧会出现眼睛 图标。点击它即可切换图层的可见性。隐藏的图层仍保留在树中，但不会在可视化编辑器或设备上显示。如需在运行时通过逻辑控制可见性，请使用条件可见性。
- 折叠所有图层：点击”图层”区域右上角的折叠 按钮，可将整个树状结构全部折叠。
图层操作
点击三点图标 打开上下文菜单。
| 操作 | 快捷键 | 说明 |
|---|---|---|
| Copy | ⌘C / Ctrl+C | 将图层复制到剪贴板 |
| Paste here | ⌘V / Ctrl+V | 将已复制的图层作为子元素粘贴 |
| Duplicate | ⌘D / Ctrl+D | 在同一容器中创建该图层的副本 |
| Rename | 修改图层的显示名称。默认情况下，图层以其内容或组件类型作为名称 | |
| Delete | ⌘⌫ / Ctrl+Del | 删除该图层及其所有子元素 |
| Wrap | 将图层包裹在新容器中：Wrap in Horizontal Container 或 Wrap in Vertical Container | |
| Unwrap / Ungroup | 移除包裹容器，并将其子元素上移一级 | |
| Move up | ↑ | 在父容器中将图层向上移动一个位置 |
| Move down | ↓ | 在父容器中将图层向下移动一个位置 |