滚动页面视图

Question

滚动页面视图

我想使用PageView垂直轴并使用鼠标滚动在页面之间移动，但是当我使用鼠标滚动时，页面不会滚动...只有当我单击并向上/向下滑动时，页面才会滚动。

有什么办法可以做到这一点吗？

我想保留财产pageSnapping: true

问题：

当我尝试用鼠标滚动页面时，它不会改变，只是回到初始偏移量。但是当我点击并滑动时...

class Body extends StatefulWidget {

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  PageController _controller = PageController(keepPage: true);

  @override
  void initState() {
    super.initState();
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: Sizing.size.height,
        width: Sizing.size.width,
        child: Stack(
          children: <Widget>[
            PageView(
              scrollDirection: Axis.vertical,
              controller: _controller,
              children: <Widget>[
                Container(color: Colors.red),
                Container(color: Colors.blue),
                Container(color: Colors.orange),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

PageView要使用鼠标滚动，您必须禁用by 设置的移动physics: NeverScrollableScrollPhysics()。然后你必须手动拦截鼠标滚动Listener。如果您还想通过滑动恢复 PageView 经典移动，则必须使用GestureDetector. 这是一个示例代码：

class _HomepageState extends State<Homepage> {
  final PageController pageController = PageController();
  // this is like a lock that prevent update the PageView multiple times while is 
  // scrolling
  bool pageIsScrolling = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: GestureDetector(
        // to detect swipe
        onPanUpdate: (details) {
          _onScroll(details.delta.dy * -1);
        },
        child: Listener(
          // to detect scroll
          onPointerSignal: (pointerSignal) {
            if (pointerSignal is PointerScrollEvent) {
              _onScroll(pointerSignal.scrollDelta.dy);
            }
          },
          child: PageView(
            scrollDirection: Axis.vertical,
            controller: pageController,
            physics: NeverScrollableScrollPhysics(),
            pageSnapping: true,
            children: [
               Container(color: Colors.red),
               Container(color: Colors.blue),
               Container(color: Colors.orange),
            ],
          ),
        ),
      )),
    );
  }

  void _onScroll(double offset) {
    if (pageIsScrolling == false) {
      pageIsScrolling = true;
      if (offset > 0) {
        pageController
            .nextPage(
                duration: Duration(milliseconds: 300),
                curve: Curves.easeInOut)
            .then((value) => pageIsScrolling = false);

        print('scroll down');
      } else {
        pageController
            .previousPage(
                duration: Duration(milliseconds: 300),
                curve: Curves.easeInOut)
            .then((value) => pageIsScrolling = false);
        print('scroll up');
      }
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，6 月前
查看次数：	8166 次
最近记录：	2 年前