PageController 总是给空闲作为结果 pageController.position.userScrollDirection

Question

页面控制器：自定义滚动

PageController 总是给出空闲作为结果 pageController.position.userScrollDirection。 我想创建一个滚动效果，我只能通过使用 pageview 滚动到下一页或上一页，但 pageview 正在滚动多个页面。我使用了页面控制器，但 AxisDirection 总是给出方向，而 userScrolldurection 给出的是空闲。请帮我解决这个问题。

代码：

import 'package:ed_cell/main.dart';
import 'package:ed_cell/registration_form.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:ed_cell/auth_service.dart';
import 'package:provider/provider.dart';
import 'package:ed_cell/userinfo_page.dart';

class MyHomePage extends StatefulWidget {
  _MyHomePageState myHomePageState = new _MyHomePageState();
  @override
  _MyHomePageState createState() => myHomePageState;
}

class _MyHomePageState extends State<MyHomePage> {
  PageController pageController;

  @override
  void initState() {
    pageController = PageController(initialPage: 2);
    pageController.addListener(() {
      changepage();
    });
    super.initState();
  }

  @override
  void dispose() {
    pageController.dispose();

    super.dispose();
  }

  changepage() {
    if (pageController.position.userScrollDirection ==
        ScrollDirection.forward) {
      print('down');
      setState(() {
        pageController.animateToPage(pageController.page.toInt() + 1,
            duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
      });
    }
    if (pageController.position.userScrollDirection == ScrollDirection.idle) {
      print('Idle');
    }

    if (pageController.position.userScrollDirection ==
        ScrollDirection.reverse) {
      print('up');
      setState(() {
        pageController.animateToPage(pageController.page.toInt() - 1,
            duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<AuthService>(
        builder: (BuildContext context, value, Widget child) {
      return PageView(
        scrollDirection: Axis.vertical,
        controller: pageController,
        children: [
>Padding(
>Padding(
>Padding(       
 ],
      );
    });
  }
}

输出：

Idle
Idle
Idle
Idle
Idle

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.19.0-4.2.pre, on Microsoft Windows [Version 10.0.18363.900], locale en-IN)
 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 3.6)
[√] Connected device (2 available)

• No issues found!

Answer 1

您可以使用NotificationListener 小部件包装您的Pageview，而不是在侦听器中添加逻辑，该小部件可以拦截来自其子小部件的所有通知，如下所示。

我将您的逻辑从 changePage 方法移至 onNotification 回调。还将动画持续时间更改为 1000 毫秒以证明它有效。

可以在codepen 中找到一个完整的工作示例。

@override
  Widget build(BuildContext context) {
    return NotificationListener(
      onNotification: (notification) {
        if(notification is UserScrollNotification){
          if (notification.direction ==
            ScrollDirection.forward) {
          print('down');
          setState(() {
            pageController.animateToPage(pageController.page.toInt() - 1,
                duration: Duration(milliseconds: 1000), curve: Curves.bounceIn);
          });
        }
        if (notification.direction ==
            ScrollDirection.idle) {
          print('Idle');
        }

        if (notification.direction ==
            ScrollDirection.reverse) {
          print('up');
          setState(() {
            pageController.animateToPage(pageController.page.toInt() + 1,
                duration: Duration(milliseconds: 1000), curve: Curves.bounceIn);
          });
        }
        }
        return false;
      },
      child: PageView(
        scrollDirection: Axis.vertical,
        controller: pageController,
        children: [
          Center(child: Container(child: Text('Page 1......'))),
          Center(child: Container(child: Text('Page 2......'))),
          Center(child: Container(child: Text('Page 3......'))),
        ],
      ),
    );
  }