PageView

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

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

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

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

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

Добавление бесконечного скролла

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

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

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

Настройка

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

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

По умолчанию PageView имеет горизонтальную прокрутку страниц. Для изменения направления прокрутки на вертикальное перейдите к Панели свойств > Свойства PageView > установите Ось на Вертикальная.

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

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

Для этого перейдите к Панели свойств > Свойства PageView > отключите Разрешить свайп для прокрутки.

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

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

Для этого перейдите к Панели свойств > Свойства PageView > включите Обновление страницы при свайпе.

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

Триггерное действие при свайпе

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

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

1. Выберите виджет из дерева виджетов или области холста.
2. Выберите Действия из панели свойств (правое меню) и нажмите + Добавить действие.
3. Вы увидите, что Тип Действия (также известный как обратный вызов) уже установлен на При свайпе по странице. Это означает, что добавленные действия будут вызываться при свайпе на страницу.
4. Теперь вы можете добавить любое действие.

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

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

Возможно, вам захочется отобразить определенную страницу сразу после загрузки. Для этого перейдите к Панели свойств > Свойства PageView > введите значение Начальный индекс страницы. Пожалуйста, обратите внимание, что индекс страницы начинается с 0. Таким образом, если вы хотите установить страницу 1, вам следует ввести 0. Если вы хотите установить страницу 2, введите 1 и так далее.

Установить отступ

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

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

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

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

1. Выберите виджет PageView и перейдите к Панели свойств > Свойства индикатора.
2. Чтобы изменить позицию индикатора,
   1. Найдите свойство Горизонтальное выравнивание и отрегулируйте значение, используя ползунок или вводя значение. Значение -1 поместит индикатор к крайнему левому краю, а значение 1 поместит индикатор к крайнему правому краю.
   2. Аналогично вы также можете изменить вертикальное выравнивание используя свойство Вертикальное выравнивание. Значение -1 поместит индикатор к верхнему краю, а значение 1 поместит индикатор к нижнему краю.
3. Чтоб...