屏幕与图层
一个 flow 由一个或多个屏幕组成。每个屏幕代表用户旅程中的一个步骤——例如付费墙、问卷调查或产品信息展示页。
每个屏幕上的元素按图层层级结构排列。
要管理屏幕、图层和元素，请打开默认的 Screens and Layers 视图。它将显示你的屏幕序列以及每个屏幕的图层结构。
管理屏幕
左侧面板的顶部区域列出了流程中的所有屏幕。每个条目都显示一个编号标签和缩略图预览。
- 选择页面：点击某个页面条目将其激活。可视化编辑器会显示所选页面，下方的图层部分也会随之更新，展示该页面的图层层级。
- 添加页面：点击页面部分顶部的 按钮，向流程中添加一个新的空白页面。
- 打开模板库：点击页面部分顶部的 按钮，浏览并应用流程模板。
- 调整页面顺序：拖放页面条目以更改其在流程中的排列顺序。
如果你的流程中存在未使用的空白屏幕，将无法发布。请在发布前删除所有草稿屏幕。
页面操作
点击页面条目上的三点图标 可打开上下文菜单。
| 操作 | 快捷键 | 描述 |
|---|---|---|
| Play Animation | 预览此屏幕上配置的动画 | |
| Copy | ⌘C / Ctrl+C | 将屏幕复制到剪贴板 |
| Paste here | ⌘V / Ctrl+V | 粘贴之前复制的屏幕 |
| Duplicate | ⌘D / Ctrl+D | 创建屏幕的副本并将其添加到流程中 |
| Rename | 更改屏幕的显示名称 | |
| Delete | ⌘⌫ / Ctrl+Del | 从流程中移除该屏幕 |
剪贴板不仅适用于整个页面，也适用于单个元素。它还支持跨流程操作——详情请参阅在流程间复制页面，了解粘贴后会保留哪些内容。
复制或粘贴屏幕时，副本中的动作会指向已复制的元素，而非原始元素。这适用于 Show、Hide 和 Select product 动作中设置的目标，包括嵌套在条件动作中的那些。引用副本以外元素的动作仍保留原始目标——粘贴后请检查这些动作。
当您删除某个屏幕时，所有指向该屏幕的 Navigate to Screen 操作都会失去目标，但操作本身不会被删除。请为其分配新的目标，或直接删除该操作——否则您将无法预览或发布流程。
在屏幕之间导航
主要文章：导航与交互
列表中屏幕的顺序本身并不决定导航方式。如需连接屏幕，请使用元素交互：将按钮配置为跳转到另一个屏幕。
屏幕设置
要查看当前屏幕的属性和设置，请点击屏幕预览中的空白区域，右侧面板将切换到屏幕设置视图。
系统界面
控制屏幕与设备硬件的交互方式。
- Safe area 添加内边距，使内容避开刘海和系统状态栏区域。
- Status bar 控制系统状态栏（时间、电量、信号图标）的显示与隐藏。
在进度指示器中包含当前屏幕
如果你在流程中添加了进度指示器元素，Adapty 会在每个屏幕上显示它。
取消勾选 Include screen in progress indicator，可将某个特定屏幕从进度指示器中移除。适用于欢迎屏幕、最终付费墙，或任何你不希望计入进度的步骤。
屏幕布局
完整文章：布局与定位
Layout 部分决定屏幕如何排列其子元素。这些属性适用于任意容器元素。
- Free：子元素相互叠加。选择 Free 会将每个子元素转换为绝对定位。
- Vertical：元素从上到下排列，类似于 flexbox 的列布局。
- Horizontal：元素从左到右排列，类似于 flexbox 的行布局。
对于垂直和水平布局，您还可以配置间距和对齐方式。
- Alignment：元素沿交叉轴的位置。
- Gap：相邻元素之间的间距。
- Distribution：子元素之间及周围空间的分布方式。
RTL 布局
勾选 Mirror for RTL 复选框，可将布局镜像为从右向左书写的文字系统。水平容器中元素的排列顺序将随之翻转。
屏幕背景
主要文章：背景
Fill 用于将屏幕背景设置为纯色、渐变、图片或视频。背景会填满整个设备视口，包括刘海和系统状态栏后面的区域——即使启用了 Safe area 也不例外。
循环播放背景视频
启用 Loop 开关，可让背景视频持续循环播放。
自定义媒体 ID
与任何图片或视频一样，您可以为屏幕背景分配自定义媒体 ID，以便在 SDK 中引用它。
屏幕间距
调整屏幕各侧（上、右、下、左）的内边距。
若屏幕的排列方向设置为 Free，则没有 Spacing 部分，因为每个子元素的位置需要单独设置。
滚动
控制溢出行为。启用 Vertical scroll 以允许屏幕内容在超出视口高度时滚动。
当屏幕内容溢出时，使用 Footer 将内容固定在屏幕底部。Footer 需要启用 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 | ↓ | 在父容器中将图层向下移动一个位置 |