Блог

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

Для первой проблемы я попытался использовать animateToPage, но безуспешно. И для второй проблемы я использовал условие if, чтобы индекс не превышал количество страниц, также без какого-либо успеха.

Вот мой код:

     Listener(
      onPointerSignal: (pointerSignal) {
        if (pointerSignal is PointerScrollEvent) {
          if (pointerSignal.scrollDelta.dy > 0) {
            if(_index < 4) {
              int newIndex = _index   1;
              pageController.jumpToPage(newIndex);
              // pageController.animateToPage(
              //   newIndex, duration: Duration(milliseconds: 500), curve: Curves.easeIn
              // );
              print(newIndex);
            }
          } 
          else 
          {
            // pageController.jumpToPage(_index - 1);
          }
        }
      },
      child: PageView(
        controller: pageController,
        scrollDirection: Axis.vertical,
        pageSnapping: true,
        onPageChanged: (index) {
          _index = index;
        },
        children: [
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.blue,
          ),
          Container(
            color: Colors.green,
          )
        ]
      ),
    )
 

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

Итак, мой вопрос в том, как решить 2 проблемы, о которых я упоминал?

Заранее спасибо…

Я думаю, что ваша проблема связана с тем, как вы используете свою _index переменную. Поскольку вы меняете значение _index как в вашем onPointerSignal , так и в вашем onPageChanged , оба значения могут конфликтовать.

Вот как я пытался реализовать ваш код:

 class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _index = 0;
  final pageController = PageController();
  final _animationDuration = Duration(milliseconds: 500);
  final _curve = Curves.easeIn;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (pointerSignal) {
        if (pointerSignal is PointerScrollEvent) {
          if (pointerSignal.scrollDelta.dy > 0) {
            pageController.nextPage(
                curve: _curve, duration: _animationDuration);
          } else {
            pageController.previousPage(
                duration: _animationDuration, curve: _curve);
          }
        }
      },
      child: PageView(
          physics: NeverScrollableScrollPhysics(),
          controller: pageController,
          scrollDirection: Axis.vertical,
          pageSnapping: true,
          onPageChanged: (index) {
            _index = index;
          },
          children: [
            Container(color: Colors.red),
            Container(color: Colors.blue),
            Container(color: Colors.green)
          ]),
    );
  }
}
 

Протестируйте полный код на DartPad

В принципе, я не завишу от _index переменной и вместо этого использую методы nextPage и previousPage для управления индексацией просмотров страниц.