本篇主要记录的是flutter中的RefreshIndicator组件,它的主要作用是用作列表的上拉加载和下拉刷新。该组件的flutter中自带的组件,所以在交互性上,需要我们自己加一些消息的提示,比如上拉加载是要提示‘正在加载’等信息,但本篇不考虑这个,首先是实现它的主要功能,那就是上拉加载和下拉刷新。
我们先来看下效果图,从图中我们可以看到,当下拉刷新时,会有新的数据‘7’加载出来,在实践的应用中,可以将数据重载,再用setState方法,即可完成页面数据的刷新。当上拉加载时,将有数字‘8’添加到列表的最后,实现加载数据。
接下来具体的代码实现:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//是否正在请求新数据
bool isLoading = false;
//加载到listview中的数据list
List<String> list = new List();
//下拉加载的控制器
ScrollController scrollController = ScrollController();
@override
void initState() {
super.initState();
//数据初始化
list.add("1");
list.add("2");
list.add("3");
list.add("4");
list.add("5");
list.add("6");
//下拉加载控制器的监听
scrollController.addListener(() {
if (scrollController.position.pixels ==
scrollController.position.maxScrollExtent) {
print('滑动到了最底部${scrollController.position.pixels}');
setState(() {
list.add("8");
});
}
});
}
@override
void dispose() {
super.dispose();
//手动停止滑动监听
scrollController.dispose();
}
/**
* 模拟下拉刷新
*/
Future <void> _onRefresh() async {
if (isLoading) {
return;
}
setState(() {
list.add("7");
});
}
@override
Widget build(BuildContext context) {
//自适应的第三方引用,详细的自适应,请查阅本人的相关flutter的ScreenUtil自适应,那里会有详细的介绍和应用
ScreenUtil.instance = ScreenUtil(width: 1080, height: 1920)..init(context);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: RefreshIndicator(
onRefresh: _onRefresh,
child: ListView.builder(
controller: scrollController,
itemCount: list.length,
itemBuilder: (BuildContext context,int position){
return showList(position);
},
),
),
);
}
//显示数据的自定义组件
Widget showList(int position){
return Container(
alignment: Alignment.center,
padding: EdgeInsets.only(top: ScreenUtil.getInstance().setHeight(50),bottom: ScreenUtil.getInstance().setHeight(50)),
child: Text(list[position],style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(45)),),
);
}
}
实现上拉加载和下拉刷新,主要靠的时2个方法,一个是在RefreshIndicator组件中onRefresh,另一个是ListView.builder中的controller。onRefresh实现下拉刷新,controller实现上拉加载。
评论区