文章目录
一、ScrollController 上拉加载更多
二、ScrollController 使用流程
三、ScrollController 判定滑动到底部
四、完整代码示例
一、ScrollController 上拉加载更多
在 FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型的参数 ,
设置 ScrollController , 用于控制上拉加载更多内容 ;
class ListView extends BoxScrollView { ListView({ Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, // 滚动控制器 , 监听上拉加载更多 bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, EdgeInsetsGeometry? padding, this.itemExtent, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, bool addSemanticIndexes = true, double? cacheExtent, List<Widget> children = const <Widget>[], int? semanticChildCount, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual, String? restorationId, Clip clipBehavior = Clip.hardEdge, })
二、ScrollController 使用流程
首先 , 声明 ScrollController 对象 ;
/// 滚动控制器 ScrollController _scrollController = ScrollController();
然后 , 为 ScrollController 对象添加监听器 , 一般情况下 , 在 initState 方法中执行该操作 , 相应的在 dispose 方法中 , 执行 ScrollController 对象的 dispose 方法 ;
@override void initState() { /// 为滚动控制器添加监听 _scrollController.addListener(() {}); super.initState(); }
最后 , 在 ListView 列表组件中设置 controller 属性 ;
/// 列表组件 child: ListView( controller: _scrollController, /// 设置上拉加载更多 children: _buildList(), ),
三、ScrollController 判定滑动到底部
调用 _scrollController.position.pixels 可以获取当前滚动的像素点 ;
调用 _scrollController.position.maxScrollExtent 可以获取当前最大可滚动位置 ;
如果上述两个值相等 , 那么说明已经滚动到列表最底部了 , 此时可以执行上拉加载更多
/// 为滚动控制器添加监听 _scrollController.addListener(() { /// _scrollController.position.pixels 是当前像素点位置 /// _scrollController.position.maxScrollExtent 当前列表最大可滚动位置 /// 如果二者相等 , 那么就触发上拉加载更多机制 if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { /// 触发上拉加载更多机制 _loadMore(); } });
加载更多方法 :
/// 上拉加载更多 _loadMore() async { /// 强制休眠 1 秒 await Future.delayed(Duration(seconds: 1)); /// 更新 UI , 再次复制一份数据 , 放入到集合中 setState(() { /// 复制一份 NAMES 集合 List<String> nameList = List<String>.from(NAMES); /// 再次将 NAMES 集合合并到被复制的集合中 /// 此时该集合中就会出现两个 NAMES 集合 nameList.addAll(NAMES); NAMES = nameList; }); }
四、完整代码示例
import 'package:flutter/material.dart'; var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '秦明', '呼延灼', '花荣', '柴进' ]; /// ListView 垂直列表 /// RefreshIndicator 下拉刷新 /// ScrollController 上拉加载更多 void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { /// 滚动控制器 ScrollController _scrollController = ScrollController(); @override void initState() { /// 为滚动控制器添加监听 _scrollController.addListener(() { /// _scrollController.position.pixels 是当前像素点位置 /// _scrollController.position.maxScrollExtent 当前列表最大可滚动位置 /// 如果二者相等 , 那么就触发上拉加载更多机制 if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { /// 触发上拉加载更多机制 _loadMore(); } }); super.initState(); } @override void dispose() { /// 销毁 滚动控制器 ScrollController _scrollController.dispose(); super.dispose(); } /// 上拉加载更多 _loadMore() async { /// 强制休眠 1 秒 await Future.delayed(Duration(seconds: 1)); /// 更新 UI , 再次复制一份数据 , 放入到集合中 setState(() { /// 复制一份 NAMES 集合 List<String> nameList = List<String>.from(NAMES); /// 再次将 NAMES 集合合并到被复制的集合中 /// 此时该集合中就会出现两个 NAMES 集合 nameList.addAll(NAMES); NAMES = nameList; }); } @override Widget build(BuildContext context) { /// 材料设计主题 return MaterialApp( home: Scaffold( appBar: AppBar( /// 标题组件 title: Text("ListView 示例"), ), /// 下拉刷新组件 body: RefreshIndicator( /// 设置下拉刷新组件 onRefresh: _onRefresh, /// 列表组件 child: ListView( controller: _scrollController, /// 设置上拉加载更多 children: _buildList(), ), ), ), ); } /// 下拉刷新回调方法 Future<Null> _onRefresh() async { /// 强制休眠 1 秒 await Future.delayed(Duration(seconds: 1)); /// 更新状态 setState(() { /// 将 List 元素翻转 NAMES = NAMES.reversed.toList(); }); return null; } /// 创建列表 List<Widget> _buildList(){ /// 遍历 NAMES 数组 /// 调用 map 方法遍历数组元素 return NAMES.map((name) => _generateWidget(name)).toList(); } Widget _generateWidget(name){ return Container( height: 80, margin: EdgeInsets.only(bottom: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.black), child: Text( name, style: TextStyle( color: Colors.yellowAccent, fontSize: 20 ), ), ); } }
执行结果 : 在下面的数组中 , ‘柴进’ 是最后一个元素 , 下拉到最后一个元素 , 会触发复制当前数组 , 添加到后面 , 然后更新列表 , 可以加载更多元素 ;
var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜', '林冲', '秦明', '呼延灼', '花荣', '柴进' ];
