滚动页面视图

时间:2020-04-24 19:41:55

标签: flutter flutter-web

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

有什么办法吗?

我要保留财产pageSnapping: true

问题:

当我尝试鼠标滚动页面时,它没有变化,只是回到初始偏移量。 但是当我单击并滑动时...

Problem exemple

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

3 个答案:

答案 0 :(得分:0)

要使内容总体上可滚动,可以将小部件(>>右键单击要使其可滚动的小部件>>重构>>用小部件包装)在SingleChildScrollView()中。

答案 1 :(得分:0)

要使用鼠标滚动,必须通过设置来禁用PageView的移动 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');
      }
    }
  }
}

答案 2 :(得分:0)

感谢卢卡!

我只是修改了整个事情来做同样的事情,问的是什么问题。

  Listener(
                onPointerMove: (pointerMove) {
                  if (pointerMove is PointerMoveEvent) {
                    _onScroll(pointerMove.delta.dy * -1);
                    print(pointerMove.delta.dy);
                  }
                },
                onPointerSignal: (pointerSignal) {
                  if (pointerSignal is PointerScrollEvent) {
                    _onScroll(pointerSignal.scrollDelta.dy);
                    print(pointerSignal.scrollDelta.dy);
                  }
                },
                child: SingleChildScrollView(
                  child: Container(
                    constraints: BoxConstraints(
                        minHeight: SizeConfig.screenHeight * .9),
                    width: SizeConfig.screenWidth,
                    height: SizeConfig.screenWidth / 2,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            alignment: Alignment.centerRight,
                            image: AssetImage(
                                'assets/images/background_circles.png'))),
                    child: PageView(
                      controller: _pageController,
                      physics: NeverScrollableScrollPhysics(),
                      pageSnapping: true,
                      scrollDirection: Axis.vertical,
                      children: [