Пэйдж вью

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Выберите виджет в дереве виджетов или в области холста.
• Выберите Действия на панели свойств (правое меню) и нажмите + Добавить действие.
• Вы заметите, что Тип действия (он же обратный вызов) уже установлен на On Page Swipe. Это означает, что действия, добавленные здесь, будут вызываться при каждом пролистывании страницы.
• Теперь вы можете добавить сюда любое действие.

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

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

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

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

1. Выберите виджет PageView и перейдите на панель свойств > Свойства индикатора.
2. Чтобы изменить положение индикатора,
   1. Найдите свойство «Горизонтальное выравнивание«, отрегулируйте значение с помощью ползунка или введите значение. При значении -1 индикатор будет расположен по всей длине слева, а при значении 1 — по всей длине справа.
   2. Аналогичным образом можно изменить положение индикатора по вертикали с помощью свойства Vertical Alignment. При значении -1 индикатор будет располагаться сверху, а при значении 1 — снизу.
3. Чтобы добавить отступы вокруг индикатора, найдите свойство Padding и введите значения в свойствах L (Left), T (Top), R (Right) и B (Bottom), чтобы получить желаемый результат.
4. Чтобы изменить активный и неактивный цвет, используйте свойства Active Color и Inactive Color для изменения цвета.
5. Чтобы изменить размер точки индикатора, используйте свойства Ширина точки и Высота точки.
6. Чтобы изменить размер активной точки, можно использовать свойство Коэффициент расширения. Например, если ввести значение 2, размер активной точки будет в два раза больше ее обычного размера.

7.Чтобы добавить пространство между точками индикатора, используйте свойство Spacing.
8.Чтобы настроить закругление углов точек индикатора, используйте свойство Радиус границы.
9.Чтобы показать только границу, включите переключатель Outline.
10.Если вы хотите скрыть индикаторы, отключите тумблер Show Indicator.

Если вы используете виджет PageView для создания интерфейса onboarding, вы, возможно, захотите разрешить пользователям прокручивать страницы по нажатию кнопки (например, кнопки next, previous и skip) в дополнение к прокрутке пролистыванием. Вы можете сделать это, добавив PageView, а затем определив действие Control Page View на виджете Tap of a Button.

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

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

Узнайте, как показать или скрыть любой виджет с помощью свойства Conditional Visibility.

Узнайте, как добавить отзывчивую видимость к любому виджету.

Узнайте, как добавить подложку и выравнивание к любому виджету.