Flutter利用ScrollController获取、控制滚动组件的滚动位置
  G4l4hCJqRVjT 2023年11月02日 96 0

Flutter 中的可滚动组件主要由三个角色组成:Scrollable、Viewport 和 Sliver。

我们如何利用ScrollController来获取滚动组件的滚动位置 1、先构建一个ScrollController

ScrollController _controller = ScrollController();

2、初始化时绑定滚动事件监听 //监听滚动事件,打印滚动位置

_controller.addListener(() {
  print("_controller.offset= ${_controller.offset}"); //打印滚动位置
}

3、将构建的ScrollController和可滚动组件关联,即指定可滚动组件的controller

body: Scrollbar(
  child: ListView.builder(
      itemCount: 100,
      itemExtent: 50.0, //指定列表项高度,指定后性能消耗小
      controller: _controller,
      itemBuilder: (context, index) {
        return ListTile(title: Text("$index"),);
      }
  ),
)

运行后,滚动Listview时打印结果如下图: image.png

利用ScrollController来控制滚动组件的滚动位置可以使用jumpTo(double offset)或者animateTo(double offset,...)方法 jumpTo 直接跳转到位置 animateTo 跳转带着动画效果 1、先构建一个ScrollController

ScrollController _controller = ScrollController();

2、初始化时绑定滚动事件监听

//监听滚动事件,打印滚动位置
_controller.addListener(() {
  print("_controller.offset= ${_controller.offset}");
}

3、将构建的ScrollController和可滚动组件关联,即指定可滚动组件的controller

body: Scrollbar(
  child: ListView.builder(
      itemCount: 100,
      itemExtent: 50.0, //指定列表项高度,指定后性能消耗小
      controller: _controller,
      itemBuilder: (context, index) {
        return ListTile(title: Text("$index"),);
      }
  ),
)

控制滚动位置: 无动画直接跳转到初始位置:

_controller.animateTo(.0);

带动画跳转到初始位置:

_controller.animateTo(
  .0,
  duration: Duration(milliseconds: 200),
  curve: Curves.ease,
);

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  iD7FikcuyaVi   2023年11月30日   26   0   0 MacWindowsandroid
  b1UHV4WKBb2S   2023年11月13日   34   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   27   0   0 flutterDart
G4l4hCJqRVjT