关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

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

发布时间:2023-06-26 16:00:48

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

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

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

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

_controller.animateTo(.0);

   

有动画跳转到初始位置:

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

   



/template/Home/leiyu/PC/Static