PageView

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

PageView полезен, когда у вас есть коллекция страниц, которые нужно отображать по одной, особенно если вы хотите, чтобы пользователь мог свайпать между ними, например, на экране онбординга, в приложении, которое показывает короткие видео при свайпе вверх или вниз, как в Instagram, TikTok, YouTube Shorts и т. д.

Добавление виджета PageView

Чтобы добавить виджет PageView в приложение:

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

Добавление бесконечной прокрутки

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

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

Мы уже описали, как добавить бесконечную прокрутку в ListView, что даст вам общее представление о том, как добавить бесконечную прокрутку и в виджет PageView.

Настройка

Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных в панели свойств.

Изменение направления прокрутки

По умолчанию PageView имеет горизонтальную прокрутку страниц. Чтобы изменить направление прокрутки на вертикальное, перейдите в Properties Panel > Page View Properties > и установите Axis в Vertical.

Включение/отключение свайпа для прокрутки

Этот виджет позволяет изменять страницу с помощью жеста свайпа, а также клика по индикатору (три точки внизу показывают, какая страница просматривается). Вы можете изменить это поведение и разрешить изменение страницы только при клике по индикатору.

Для этого перейдите в Properties Panel > Page View Properties > и отключите Allow swipe scrolling.

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

Иногда может потребоваться перестроить страницу, на которой находится виджет PageView, то есть перестроить содержимое вне виджета PageView. Вы можете захотеть загрузить данные или показать/скрыть элементы UI в зависимости от отображаемой страницы. Например, вы можете отображать плавающую кнопку действий только на определенной странице или показывать/скрывать определенные виджеты в зависимости от индекса страницы.

Для этого перейдите в Properties Panel > Page View Properties > и включите Update Page on Swipe.

Вот пример отображения индекса текущей страницы на странице, содержащей виджет PageView.

Запуск действия при свайпе

Вы можете захотеть запустить действие при свайпе страницы в виджете PageView. Например, вы можете загрузить данные для конкретной страницы только тогда, когда пользователь свайпнет к ней, вместо загрузки всех данных заранее.

Чтобы запустить действие при свайпе:

1. Выберите виджет в дереве виджетов или области холста.
2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
3. Вы заметите, что Type of Action (он же callback) уже установлен в On Page Swipe. Это значит, что действия, добавленные здесь, будут вызываться при каждом свайпе страницы.
4. Теперь вы можете добавить любое действие.

Вот пример показа сообщения snackbar при свайпе на вторую страницу.

Установка начального индекса страницы

Вы можете захотеть отобразить конкретную страницу сразу после загрузки. Для этого перейдите в Properties Panel > Page View Properties > и введите значение Initial Page Index. Обратите внимание, что индекс страницы начинается с 0. Таким образом, если вы хотите установить страницу 1, введите 0. Если страницу 2 — введите 1 и так далее.

Установка отступа

Отступ добавляет пространство между содержимым PageView и его границей. Чтобы изменить отступ, выберите виджет PageView, перейдите в Properties Panel > Page View Properties >, найдите свойство Margin и измените значения.

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

Индикатор помогает определить, какая страница сейчас просматривается. Вы можете изменить внешний вид индикатора с помощью различных свойств в разделе Indicator Properties.

Чтобы настроить индикатор:

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

к сведению

Ширина активной точки рассчитывается путем умножения значения свойства Dot Width на значение свойства Expansion Factor. Таким образом, если Dot Width установлено в 40, а Expansion Factor — в 2, то ширина активной точки будет 80.

1. Чтобы добавить пространство между точками индикатора, используйте свойство Spacing.
2. Чтобы настроить скругление углов точек индикатора, используйте свойство Border Radius.
3. Чтобы показать только границу, включите переключатель Outline.
4. Если вы хотите скрыть индикаторы, отключите переключатель Show Indicator.

Прокрутка PageView при нажатии кнопки

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

Вот пример прокрутки PageView при нажатии кнопки:

1. Сначала добавьте виджет PageView.
2. Настройте виджет PageView и добавьте кнопки для перехода на предыдущую и следующую страницы.
3. Теперь выберите любую кнопку и определите действие Control Page View.

Действие Control Page View

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

Типы действий для PageView

Это типы действий, которые вы можете добавить для pageview.

• Previous: Прокрутка к предыдущей странице в pageview.
• Next: Прокрутка к следующей странице в pageview.
• First: Прокрутка к первой странице в pageview.
• Last: Прокрутка к последней странице в pageview.
• Jump to: Прокрутка к конкретной странице в pageview. Обратите внимание, что индекс страницы начинается с 0. Таким образом, если вы хотите перейти к странице 1, введите 0. Если к странице 2 — введите 1 и так далее.

Добавление действия Control Page View

Следуйте шагам ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, Container, Button и т. д.), к которому хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню). Если это первое действие, нажмите кнопку + Add Action. В противном случае нажмите кнопку "+" под плиткой предыдущего действия (в Action Flow Editor) и выберите Add Action.
3. Найдите и выберите действие Control Page View (в разделе Widget/UI Interactions).
4. Установите Page View to Control в имя page view, добавленного на вашу страницу.
5. Выберите Page View Action Type.

Видеоурок

Если вы предпочитаете видеоурок, вот он для вас: