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

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

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

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

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

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

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

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