PageView

PageView делает страницы пролистываемыми: каждый вложенный виджет — отдельная страница, они листаются по горизонтали или вертикали.

Отсюда две типичные области применения: онбординг при первом запуске и вертикальные ленты коротких видео — Instagram, TikTok, YouTube Shorts.

Как добавить

1. Перетащите PageView из вкладки Layout Elements.
2. По умолчанию создаются три страницы, на холсте видна первая. В дереве виджетов они называются PageView Page; чтобы показать другую, установите Active Page в панели свойств.
3. Новая страница добавляется кнопкой + Add Page в Properties Panel > Active Page.
4. Лишняя удаляется так: выделите нужную PageView Page и нажмите Delete.
5. Внутри страницы по умолчанию лежит Image. Для онбординга оберните его (⌘ + B) в Stack и добавьте поверх текст и кнопки.

Сохранение состояния страниц

По умолчанию PageView заново строит страницу, когда вы уходите с неё свайпом и возвращаетесь. Состояние при этом сбрасывается — например, текст, введённый в форму, — а запросы к API и бэкенду выполняются снова.

Чтобы просмотренные страницы сохранялись, откройте Properties Panel > Page View Properties и включите Keep Page State Alive. Тогда при возврате на страницу останутся введённые данные и позиция прокрутки, а её запросы к API и бэкенду не будут повторяться.

Настройка действует и на страницы, построенные из списка, и на страницы с бесконечной прокруткой.

Бесконечная прокрутка

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

Механика та же, что у списков: см. бесконечную прокрутку ListView.

Настройки

Внешний вид и поведение задаются в панели свойств.

Направление

По умолчанию страницы листаются по горизонтали. Для вертикального листания установите Axis в Vertical в Properties Panel > Page View Properties.

Листание жестом

Страницу можно сменить смахиванием или кликом по индикатору — трём точкам внизу. Чтобы оставить только индикатор, выключите Allow swipe scrolling в Properties Panel > Page View Properties.

Обновление страницы при пролистывании

Иногда при смене страницы нужно перерисовать то, что лежит вокруг PageView: показать плавающую кнопку только на одном экране, подгрузить данные, спрятать часть интерфейса.

За это отвечает переключатель Update Page on Swipe в Properties Panel > Page View Properties.

Пример с выводом номера текущей страницы за пределами виджета:

Действие при пролистывании

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

1. Выделите виджет в дереве или на холсте.
2. Выберите Actions в панели свойств и нажмите + Add Action.
3. Type of Action уже выставлен в On Page Swipe — действия отсюда срабатывают при каждом пролистывании.
4. Добавьте нужное действие.

Пример со снекбаром при переходе на вторую страницу:

Страница при открытии

Initial Page Index в Properties Panel > Page View Properties задаёт страницу, которая показывается сразу. Нумерация с нуля: первой странице соответствует 0, второй 1 и так далее.

Внешние отступы

Margin отделяет содержимое PageView от его границ. Настройка живёт в Properties Panel > Page View Properties.

Индикатор

Индикатор показывает, какая страница открыта. Его вид настраивается в разделе Indicator Properties.

1. Выделите PageView и откройте Properties Panel > Indicator Properties.
2. Положение индикатора:
   1. Horizontal Alignment — по горизонтали: -1 прижимает влево, 1 вправо.
   2. Vertical Alignment — по вертикали: -1 вверх, 1 вниз.
3. Padding задаёт отступы вокруг индикатора — L (слева), T (сверху), R (справа), B (снизу).
4. Active Color и Inactive Color — цвета текущей и остальных точек.
5. Dot Width и Dot Height — размер точки.
6. Expansion Factor увеличивает активную точку: значение 2 сделает её вдвое шире.

7. Spacing — расстояние между точками.
8. Border Radius — скругление точек.
9. Outline оставляет от точек только контур.
10. Show Indicator прячет индикатор целиком.

Листание кнопками

В онбординге кроме смахивания обычно нужны кнопки «далее», «назад» и «пропустить». Делается это действием Control Page View на нажатии кнопки.

Порядок такой:

1. Добавьте PageView.
2. Настройте его и добавьте кнопки перехода вперёд и назад.
3. Повесьте на каждую действие Control Page View.

Действие Control Page View

Действие управляет пролистыванием из логики приложения: перейти к следующей странице, вернуться к предыдущей, прыгнуть на конкретную.

Виды действия

• Previous — предыдущая страница.
• Next — следующая.
• First — первая.
• Last — последняя.
• Jump to — конкретная страница по номеру. Нумерация с нуля: первой соответствует 0, второй 1 и так далее.

Как добавить

1. Выделите виджет — контейнер, кнопку или другой.
2. Выберите Actions в панели свойств. Для первого действия нажмите + Add Action, для последующих — «+» под предыдущим блоком в Action Flow Editor и Add Action.
3. Найдите действие Control Page View в группе Widget/UI Interactions.
4. В Page View to Control укажите имя нужного PageView на странице.
5. Выберите вид действия.

Видеоразбор