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