Flutter利用ScrollController获取、控制滚动组件的滚动位置

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

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时打印结果如下图：

利用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, );