Флоу состоит из одного или нескольких экранов. Каждый экран представляет собой отдельный шаг в пути пользователя — например, пейвол, квиз или слайд с информацией о продукте.

Элементы на каждом экране организованы в иерархию слоёв.

Для управления экранами, слоями и элементами откройте стандартный вид Screens and Layers. В нём отображается последовательность экранов и структура слоёв каждого экрана.

Управление экранами

В верхней части левой панели перечислены все экраны флоу. Каждый элемент отображает пронумерованную метку и миниатюру предварительного просмотра.

• Выбрать экран: Нажмите на запись экрана, чтобы сделать его активным. Визуальный редактор отобразит выбранный экран, а раздел Layers ниже обновится и покажет его иерархию слоёв.
• Добавить экран: Нажмите кнопку в верхней части раздела Screens, чтобы добавить новый пустой экран во флоу.
• Открыть библиотеку шаблонов: Нажмите кнопку в верхней части раздела Screens, чтобы просмотреть и применить шаблоны флоу.
• Изменить порядок экранов: Перетащите записи экранов, чтобы изменить их порядок во флоу.

Действия с экранами

Нажмите на иконку с тремя точками в строке экрана, чтобы открыть контекстное меню.

Действие	Горячая клавиша	Описание
Play Animation		Предпросмотр анимаций, настроенных на этом экране
Copy	⌘C / Ctrl+C	Копировать экран в буфер обмена
Paste here	⌘V / Ctrl+V	Вставить ранее скопированный экран
Duplicate	⌘D / Ctrl+D	Создать копию экрана и добавить её во флоу
Rename		Изменить отображаемое имя экрана
Delete	⌘⌫ / Ctrl+Del	Удалить экран из флоу

Когда вы копируете или дублируете экран, действия в копии ссылаются на скопированные элементы, а не на оригиналы. Это распространяется на цели, заданные в действиях Show, Hide и Select product, включая те, что вложены в условные действия. Действия, ссылающиеся на элементы за пределами копии, сохраняют исходные цели — проверьте их после вставки.

Навигация между экранами

Порядок экранов в списке сам по себе не определяет навигацию. Чтобы связать экраны между собой, используйте взаимодействия с элементами: настройте кнопку на переход пользователя к другому экрану.

Настройки экрана

Чтобы просмотреть свойства и настройки активного экрана, нажмите на пустую область в превью экрана. Правая панель переключится в режим настроек экрана.

Системный интерфейс

Управляет тем, как экран взаимодействует с аппаратными элементами устройства.

• 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, чтобы фоновое видео воспроизводилось непрерывно по кругу.

Назначение пользовательского медиа-идентификатора

Как и в случае с любым изображением или видео, вы можете присвоить фону экрана пользовательский медиа-идентификатор для обращения к нему в SDK.

Отступы экрана

Задаёт внутренние отступы экрана для каждой стороны (сверху, справа, снизу, слева).

Прокрутка

Управляет поведением при переполнении. Включите Vertical scroll, чтобы содержимое экрана прокручивалось, когда оно выходит за пределы видимой области.

Группы выбора

В разделе Selectable groups перечислены все группы выбора на текущем экране — из квизов, продуктов, вкладок, переключателей триала или любого пользовательского выбираемого элемента.

Нажмите на запись группы, чтобы переименовать её, изменить тип, просмотреть переменные, которые она предоставляет, или удалить её.

Управление слоями

Каждый элемент на экране представлен в виде слоя. Раздел Layers отображает порядок элементов на активном экране.

Древовидная структура отражает отношения родитель-потомок. Нажмите на стрелку рядом с любым родительским слоем, чтобы развернуть или свернуть его дочерние элементы.

Создавать слои напрямую нельзя. Каждый элемент, добавленный через представление Добавить элемент, появляется как новый слой в дереве.

• Выбрать слой: кликните по слою, чтобы выделить его. Визуальный редактор подсветит соответствующий элемент на канвасе, а правая панель отобразит его свойства дизайна и взаимодействия.
• Изменить порядок слоёв: перетащите слои внутри дерева, чтобы изменить их порядок в родительском контейнере. Порядок в дереве соответствует визуальному порядку на экране.
• Показать или скрыть слой: наведите курсор на слой, чтобы справа от него появилась иконка глаза . Кликните по ней, чтобы переключить видимость слоя. Скрытые слои остаются в дереве, но не отображаются ни в визуальном редакторе, ни на устройстве. Чтобы управлять видимостью с помощью логики во время выполнения, используйте условную видимость.
• Свернуть все слои: нажмите кнопку свернуть в правом верхнем углу секции Layers, чтобы свернуть всё дерево.

Действия со слоями

Нажмите на иконку с тремя точками , чтобы открыть контекстное меню.

Действие	Сочетание клавиш	Описание
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	↓	Переместить слой на одну позицию вниз в родительском контейнере