Flutter web 中鼠标滚动事件的 PageView animateToPage

Question

我尝试在鼠标滚动事件上使用 jumpToPage，我成功了。但是现在有两个问题。 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 并对其进行了哈希处理。为了测试目的，我还对 else 语句中的 jumpToPage 进行了哈希处理。

所以，我的问题是，如何解决我提到的 2 个问题？

提前致谢...

Answer 1

我认为您的问题出在您使用 _index 变量的方式上。当您在 onPointerSignal 和 onPageChanged 中更改 _index 的值时，这两个值可能会发生冲突。

以下是我尝试实现您的代码的方式：

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)
          ]),
    );
  }
}

Test the full code on DartPad

基本上我不依赖于 _index 变量，而是使用方法 nextPage 和 previousPage 来管理网页浏览索引。

Flutter web 中鼠标滚动事件的 PageView animateToPage

PageView animateToPage on mouse scroll event in Flutter web

flutter

flutter-web