
ScrollController
构造函数
ScrollController({ double initialScrollOffset = 0.0, //初始滚动位置 this.keepScrollOffset = true, //是否保存滚动位置 this.debugLabel, })
常用方法
offset:可滚动组件当前的滚动位置jumpTo(double offset)、animateTo(double offset,...):这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。addListener() 添加滚动的监听,可以获取滚动过的位置。dispose(),在widget的dispose时调用,避免内存泄漏_scrollController.position.pixels 滑动距离_scrollController.offset 滑动距离_scrollController.position.maxScrollExtent 最大可滑动距离_scrollController.position.minScrollExtent 最小可滑动距离_scrollController.position.viewportDimension 滚动视图所占长度
例子1: 点击回到顶部
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class MinePage extends StatefulWidget { @override _MinePageState createState() => _MinePageState();}class _MinePageState extends State<MinePage> { ScrollController _controller = new ScrollController(); bool showToTopBtn = false; //是否显示“返回到顶部”按钮 @override void dispose() { // TODO: implement dispose //为了避免内存泄露,需要调用_controller.dispose _controller.dispose(); super.dispose(); } @override void initState() { // TODO: implement initState super.initState(); _controller.addListener(() { print(_controller.offset); //打印offset //当offset小于500并且,showToTopBtn= true的时,显示返回按钮 if (_controller.offset < 500 && showToTopBtn) { setState(() { showToTopBtn = false; }); } else if (_controller.offset >= 500 && showToTopBtn == false) { setState(() { showToTopBtn = true; }); } }); } @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( controller: _controller, slivers: <Widget>[ SliverAppBar( pinned: true, stretch: true, expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( title: Text('开学季'), background: Image.network( "https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg", fit: BoxFit.cover, ), ), ), SliverPadding( padding: EdgeInsets.only(top: 10), ), SliverFixedExtentList( itemExtent: 66, //固定高度 delegate: SliverChildBuilderDelegate( (context, index) { Color color = index % 2 == 0 ? Colors.orange : Colors.deepOrangeAccent; return Container( alignment: Alignment.center, color: color, child: Text('$index'), ); }, childCount: 50, ), ), ], ), floatingActionButton: !showToTopBtn ? null : FloatingActionButton( child: Icon(Icons.arrow_upward), onPressed: () { //返回到顶部时执行动画 _controller.animateTo(.0, duration: Duration(milliseconds: 200), curve: Curves.ease ); } ), ); }}
