Заметки
PageView свайп в одну сторону

Егор Долгов

24.04.2019 12:26:00 (обновлено 15.08.2019 21:30:44)

За все время: 1538 просмотров, 801 посетитель.
За последние 30 дней: 7 просмотров, 6 посетителей.

PageView свайп в одну сторону

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

Чтобы запретить прокрутку с помощью касания, нужно в параметре physics задать значение NeverScrollableScrollPhysics().

PageView(
  physics: NeverScrollableScrollPhysics(),
  children: <Widget>[
    MyPageFirst(),
    MyPageSecond(),
    ...]
)//PageView

И тогда чтобы переходить от страницы к странице нужен объект PageController, заданный в параметре controller.

_pageController = PageController(initialPage: 0);

PageView(
  physics: NeverScrollableScrollPhysics(),
  controller: _pageController,
  children: <Widget>[
    MyPageFirst(),
    MyPageSecond(),
    ...]
)//PageView

Для перехода к другой странице нужно вызвать метод _pageController.jumpToPage()
_pageController.jumpToPage(1);
Для анимированного перехода нужно использовать _pageController.animateToPage()
_pageController.animateToPage(1, duration: Duration(milliseconds: 600), curve: Curves.linear);

Односторонняя прокрутка

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

С помощью метода addListener зарегистрируем обработчик событий для объекта класса PageController.

_pageController.addListener((){ print('Текущее состояние прокрутки ${_pageController.page}');//тип double print('Состояние прокрутки ${_pageController.position.userScrollDirection.index}'); // 0 - прокрутка происходит с помощью функций jumpToPage или animateToPage // 1 - пользователь прокручивает "назад", к предыдущей странице // 2 - пользователь прокручивает "вперед", к следующей странице });

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

Т.к. NeverScrollableScrollPhysics() блокирует все пользовательские жесты, мы не будем его использовать, а блокировать свайп вперед будем в обработчике событий.

Код обработчика односторонней прокрутки

_pageController.addListener((){ if (_pageController.position.userScrollDirection.index == 2 && indexPage < _pageController.page) _pageController.jumpToPage(indexPage); else if (_pageController.position.userScrollDirection.index == 1 && _pageController.page == _pageController.page.roundToDouble()) { indexPage = _pageController.page.toInt(); } });

Что происходит в обработчике для односторонней прокрутки

indexPage - в этой переменной должен быть номер страницы, которую должен видеть пользователь.

Если пользователь делает свайп для прокрутки вперед _pageController.position.userScrollDirection.index == 2
И если текущая позиция меньше той к которой может привести свайп вперед && indexPage < _pageController.page // это условие нужно чтобы небыло резкого перехода, когда мы делаем не доконца свайп назад, и возможно захотим "отменить действие свайпа"
Делаем переход без анимации к установленной странице, чтобы прервать и отменить свайп вперед _pageController.jumpToPage(indexPage);
Если пользователь выполняет свайп назад _pageController.position.userScrollDirection.index == 1
И если текущее состояние положения прокрутки равно целому значения && _pageController.page == _pageController.page.roundToDouble() // Значит переход завершен
Изменяем номер страницы которая должна быть открыта indexPage = _pageController.page.toInt();

Функция бизнес логики для смены страницы

setPage(int page) { if (indexPage == page) return; indexPage = page; _pageController.animateToPage(indexPage, duration: Duration(milliseconds: 600), curve: Curves.linear); }

Метод onPageChanged в PageView

В виджете PageView можно задать метод onPageChanged
PageView( onPageChanged:(int page){indexPage = page;}, physics: NeverScrollableScrollPhysics(), controller: _pageController, children: <Widget>[ MyPageFirst(), MyPageSecond(), ...] )//PageView
В данном примере не рекомендуем его использовать, и выполнять все проверки и смену состояния в одном месте: _pageController.addListener((){}).

Подборка заметок