一、如何实现列表下拉刷新?
在Flutter中有一个RefreshIndicator,它是一个下拉刷新的widget,通过它我们可以实现列表的下拉刷新
二、添加下拉刷新的代码
刷新过程中
刷新完成后数据发生了变化,第一条数据由北京变成了拉萨,完成了对数据的处理
三、如何实现上拉加载更多?
为了给列表添加拉加载更多的功能,我们可以借助ScrollController,列表支持设置controller参数,通过ScrollController监听列表滚动的位置,来实现加载更多的功能
当移动到底部后会重新加载更多的数据
四、代码:
import 'package:flutter/material.dart';
void main() => runApp(MyRefreshListViewApp());
class MyRefreshListViewApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyRefreshListViewApp> {
void initState(){
_scrollController.addListener((){
if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){
_loadData();
}
});
super.initState();
}
List<String> cityNames=['北京', '上海', '广州','深圳', '杭州','苏州','成都', '武汉', '洛阳','厦门', '青岛','拉萨'];
ScrollController _scrollController=ScrollController();
Future<Null> _handleRefresh()async{
await Future.delayed(Duration(seconds: 2));
setState(() {
cityNames=cityNames.reversed.toList();
});
}
_loadData() async{
await Future.delayed(Duration(milliseconds: 200));
setState(() {
List<String>list=List<String>.from(cityNames);
list.addAll(cityNames);
cityNames=list;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('高级功能列表下拉刷新与上拉加载更多功能实现')),
body: RefreshIndicator(
onRefresh: _handleRefresh,
child: ListView(
controller: _scrollController,
children:_buildList()
),
)
));
}
List<Widget> _buildList() {
return cityNames.map((city)=>_item(city)).toList();
}
Widget _item(String city){
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color:Colors.green),
child: Text(
city,
style: TextStyle(color:Colors.black54,fontSize: 20),
),
);
}
}
注:
1、未解决的问题①listview下拉刷新时并没有和手势一起向下移动
②在State类里不能覆盖方法initState()和dispose()
2、在dispose()方法中需要注销scrollcontroller