dart ScrollController如何检测滚动的开始、停止和滚动?

6qftjkof  于 10个月前  发布在  其他
关注(0)|答案(7)|浏览(150)

我使用ScrollControllerSingleChildScrollView小部件,我想检测 * 滚动开始 滚动结束/停止 * 和 * 仍然滚动 *。
我怎么能检测到这一点?
我使用Listener

scrollController = ScrollController()
          ..addListener(() {
            scrollOffset = _scrollController.offset;
          });

字符串
我也试过_scrollController.position.activity.velocity,但没有用。
也有

_scrollController.position.didEndScroll();
    _scrollController.position.didStartScroll();


但是我怎么用它呢?

pexxcrt2

pexxcrt21#

不需要NotificationListener,我们可以单独使用滚动控制器。
首先,使用WidgetsBinding.instance.addPostFrameCallback注册一个帧后回调,以确保此时滚动控制器已经与滚动视图相关联。我们将在该回调中设置侦听器。
为了监听滚动更新,我们可以使用scrollController.addListener
对于收听开始和停止滚动,我们可以使用bgScrollCtrl.position.isScrollingNotifier.addListener。你可以检查下面的代码:

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      scrollCtrl.addListener(() { 
        print('scrolling');
      });
      scrollCtrl.position.isScrollingNotifier.addListener(() { 
        if(!scrollCtrl.position.isScrollingNotifier.value) {
          print('scroll is stopped');
        } else {
          print('scroll is started');
        }
      });
    });

字符串

fafcakar

fafcakar2#

此链接https://medium.com/@diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac
只需将您的SingleChildScrollView Package 为NotificationListener并更新您的代码,如..

NotificationListener<ScrollNotification>(
                onNotification: (scrollNotification) {
                  if (scrollNotification is ScrollStartNotification) {
                    _onStartScroll(scrollNotification.metrics);
                  } else if (scrollNotification is ScrollUpdateNotification) {
                    _onUpdateScroll(scrollNotification.metrics);
                  } else if (scrollNotification is ScrollEndNotification) {
                    _onEndScroll(scrollNotification.metrics);
                  }
                },
                child: SingleChildScrollView(
                /// YOUR OWN CODE HERE
               )
)

字符串
声明方法,

_onStartScroll(ScrollMetrics metrics) {
    print("Scroll Start");
  }

  _onUpdateScroll(ScrollMetrics metrics) {
    print("Scroll Update");
  }

  _onEndScroll(ScrollMetrics metrics) {
    print("Scroll End");
  }


您将通过特定的方式收到通知。

8ehkhllq

8ehkhllq3#

NotificationListner不为我工作,因为我动画滚动视图。当我触摸它时,ScrollEndNotification被调用。
所以为了检测scrollview到达底部或顶部。我添加了Listner到scrollcontroller。

_scrollController.addListener(_scrollListener);

  _scrollListener() {
    if (_scrollController.offset >= _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
    if (_scrollController.offset <= _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      setState(() {
        debugPrint("reach the top");
      });
    }
  }

字符串

8i9zcol2

8i9zcol24#

_scrollController.position.pixels

if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
//scroll end
}

字符串
要使用这些,您应该向scrollview添加一个侦听器

e5njpo68

e5njpo685#

您可以使用_scrollController.position.pixels获取滚动位置,并使用addlistener通知更改

if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
//for scroll end
}

if(_scrollController.position.pixels == _scrollController.position.minScrollExtent){
//for scroll at top
}

字符串

kx1ctssn

kx1ctssn6#

有一个用于此用例的包。scroll_edge_listener
你可以通过一些配置来检测滚动的开始或结束,比如偏移和去抖动。只要用ScrollEdgeListener Package 你的滚动视图并附加一个监听器。

ScrollEdgeListener(
  edge: ScrollEdge.end,
  edgeOffset: 400,
  continuous: false,
  debounce: const Duration(milliseconds: 500),
  dispatch: true,
  listener: () {
    debugPrint('listener called');
  },
  child: ListView(
    children: const [
      Placeholder(),
      Placeholder(),
      Placeholder(),
      Placeholder(),
    ],
  ),
),

字符串

wbrvyc0a

wbrvyc0a7#

更新2023:滚动后检查滚动停止

if(notification.direction == ScrollDirection.idle)

字符串

相关问题