屏幕与图层

一个流程由一个或多个屏幕组成。每个屏幕代表用户旅程中的一个步骤——例如付费墙、问卷或产品信息展示页。

每个屏幕上的元素按图层层级结构组织。 要管理屏幕、图层和元素，请打开默认的 Screens and Layers 视图。该视图将显示您的屏幕序列以及每个屏幕的图层结构。

管理屏幕

Flow builder screens and layers view (both panels visible)

左侧面板顶部列出了流程中的所有屏幕。每个条目显示一个编号标签和缩略图预览。

  • 选择屏幕：点击某个屏幕条目将其激活。可视化编辑器会显示所选屏幕，下方的 Layers 区域也会随之更新，展示其图层层级。
  • 添加屏幕：点击 Screens 区域顶部的 按钮，向流程中添加一个新的空白屏幕。
  • 调整屏幕顺序：拖放屏幕条目以更改它们在流程中的排列顺序。

如果流程中存在未使用的空白屏幕，将无法发布。请在发布前删除所有草稿屏幕。

页面操作

点击页面条目上的三点图标 即可打开上下文菜单。

Flow builder screen context menu
操作快捷键描述
播放动画预览此屏幕上配置的动画
复制⌘C / Ctrl+C将屏幕复制到剪贴板
粘贴到此处⌘V / Ctrl+V粘贴之前复制的屏幕
复制副本⌘D / Ctrl+D创建屏幕的副本并将其添加到流程中
重命名修改屏幕的显示名称
删除⌘⌫ / Ctrl+Del从流程中移除该屏幕

当你删除某个屏幕时，所有指向该屏幕的 导航到屏幕 操作都会失去目标，但该操作本身不会被自动删除。请为其指定新的目标，或者删除该操作——否则，你将无法 预览或发布流程。

主要文章：导航与交互

列表中屏幕的顺序本身并不决定导航方式。如需连接屏幕，请使用元素交互：将按钮配置为跳转到另一个屏幕。

Static Navigate to action on the Welcome screen's primary button

屏幕设置

要查看当前屏幕的属性和设置，请点击屏幕预览中的空白区域，右侧面板将切换到屏幕设置视图。

系统界面

Screen settings — System UI

控制屏幕与设备硬件的交互方式。

  • Safe area 添加内边距，使内容避开刘海和系统状态栏区域。
  • Status bar 控制系统状态栏（时间、电量、信号图标）的显示与隐藏。

在进度指示器中包含当前屏幕

如果你在流程中添加了进度指示器元素，Adapty 会在每个屏幕上显示它。

取消勾选 Include screen in progress indicator，可将某个特定屏幕从进度指示器中移除。适用于欢迎屏幕、最终付费墙，或任何你不希望计入进度的步骤。

屏幕布局

完整文章：元素定位

Screen settings — Layout

Layout 部分决定屏幕如何分布其子元素。这些属性适用于任何容器元素。

  • Free：子元素独立定位。

  • Vertical：元素从上到下排列，类似 flexbox 列布局。

  • Horizontal：元素从左到右排列，类似 flexbox 行布局。 对于垂直和水平布局，你还可以配置间距和对齐方式。

  • Alignment：元素在交叉轴上的位置。

  • Gap：相邻元素之间的间距。

  • Distribution：子元素之间及周围空间的分配方式。

RTL 布局

勾选 Mirror for RTL 复选框，可为从左到右书写的文字系统镜像布局。水平容器中元素的顺序将会翻转。

屏幕背景

主要文章：背景

Screen settings — Background

Fill 用于将屏幕背景设置为纯色、渐变色、图片或视频。背景会填充整个设备视口，包括刘海和系统状态栏后方的区域——即使启用了 Safe area 也不例外。

循环播放背景视频

开启 Loop 开关，可让背景视频持续循环播放。

自定义媒体 ID

与任何图片或视频一样，你可以为屏幕背景指定一个自定义媒体 ID，以便在 SDK 中引用它。

屏幕间距

屏幕设置 — 间距

调整屏幕四侧（上、右、下、左）的内边距。

滚动

Screen settings — Scroll

控制溢出行为。启用 Vertical scroll 可在屏幕内容超出视口高度时允许滚动。

可选组

主要文章：可选元素与组

Selectable groups 部分列出了当前屏幕上所有的可选组——来自测验、产品、标签页、试用开关或任何自定义可选元素。

点击某个组条目可对其重命名、更改类型、查看它所公开的变量或将其删除。

屏幕设置 — 可选择的组

管理图层

屏幕上的每个元素都以图层的形式呈现。“图层”面板显示当前屏幕上各元素的排列顺序。

Flow 图层的叠加方式与图形设计软件中的图层不同。它们代表屏幕的各个独立组件，只有使用绝对定位或固定定位时，元素才会相互重叠。元素的堆叠顺序由 z-index 属性决定，而非其在图层树中的位置。

树形结构反映了父子层级关系。点击任意父级图层上的箭头可展开或折叠其子项。

您无法直接创建图层。通过添加元素视图添加的每个元素都会作为新图层出现在树中。

Flow builder layer view
  • 选择图层：点击某个图层即可选中它。可视化编辑器会在画布上高亮显示对应元素，右侧面板则展示其设计和交互属性。
  • 调整图层顺序：在树形结构中拖拽图层，即可改变其在父容器中的排列顺序。树形结构中的顺序与屏幕上的视觉顺序一致。
  • 显示或隐藏图层：将鼠标悬停在某个图层上，其右侧会出现眼睛 图标，点击即可切换该图层的可见性。隐藏的图层仍保留在树形结构中，但不会显示在可视化编辑器或设备上。如需在运行时通过逻辑控制可见性，请使用条件可见性功能。
  • 折叠所有图层：点击图层区域右上角的折叠 按钮，即可收起整个树形结构。

图层操作

点击三点图标 可打开上下文菜单。

Flow builder layer context menu
操作快捷键说明
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↓在父容器中将图层下移一个位置