FlutterListView 列表高级功能 ( ScrollController 上拉加载更多 )
Posted 韩曙亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了FlutterListView 列表高级功能 ( 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 = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜',
'林冲', '秦明', '呼延灼', '花荣', '柴进' ];
五、相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 插件下载地址 : https://pub.dev/packages
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
- GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
- Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
- Dart 语言练习网站 : https://dartpad.dartlang.org/
重要的专题 :
- Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
-
GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 )
-
博客源码快照 : https://download.csdn.net/download/han1202012/21611041 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
以上是关于FlutterListView 列表高级功能 ( ScrollController 上拉加载更多 )的主要内容，如果未能解决你的问题，请参考以下文章
FlutterListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 )