封装了Flutter的ListView,只要传递请求数据的方法和绘制item的方法进去就可以绘制ListView,同时支持下拉刷新、上拉加载更多。 主要三个文件: refresh_list_view.dart//封装的ListView, list_view_item.dart//ListView的子item渲染view, refersh_list_view_demo.dart//封装的ListView使用方法 github地址:https://github.com/damengzai/flutter-test/tree/master/test_flutter/lib/listview 可以下拉刷新、上拉加载更多的ListView RefreshIndicator:一个Material风格的下拉刷新组件,包含一个可滚动的子组件,当子组件下拉是会有一个圆形刷新图标,当下拉距离足够的时候,会触发onRefresh,而在onRefresh中会去刷新数据。 当子组件太短而不能滚动的时候,需要添加physics: const AlwaysScrollableScrollPhysics(),否则下拉刷新和上拉加载更多都无效,无法触发了。 ListView:itemBuilder用于渲染子item,controller添加一个ScrollController,用于响应滚动事件,监听滚动到底部,做加载更多处理,同时ScrollController可以跳转到指定位置,记住滚动位置等。 在初始换state中首先通过_loadMore()获取数据,同时使用_scrollController监听滚动滚动的位置,当滚动到最底部的时候,会触发加载更多数据的方法。 加载更多的方法,模拟了一个网络请求,当有数据返回的时候,通过setState将数据更新回state中,实现UI的刷新。下拉刷新的方法类似,不做过多介绍。 不做过多介绍,可以根据自己的需要定制UI,现在只显示了一个TextView。 getListData、createListItem分别是获取数据和渲染子item的方法,传递方法进去(比JAVA灵活多了)自己定制更灵活。以上是一个下拉刷新、上拉加载更多的ListView的简单封装,后续持续优化,方便使用。1. refresh_list_view.dart
@override
Widget build(BuildContext context) {
return RefreshIndicator(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
if (widget.listItemView is Function) {
return widget.listItemView(index, items[index]);
}
},
physics: const AlwaysScrollableScrollPhysics(),
controller: _scrollController,
),
onRefresh: _handleRefresh);
}
@override
void initState() {
super.initState();
_loadMore();
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
//滚动到最后请求更多
_loadMore();
}
});
}
//加载更多
Future _loadMore() async {
if (!isLoading) {
if(this.mounted) {
setState(() {
//通过setState去更新数据
isLoading = true;
});
}
}
List moreList = await mockHttpRequest();
if (this.mounted) {
setState(() {
items.addAll(moreList);
isLoading = false;
});
}
}
2. list_view_item.dart
@override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
elevation: 4.0,
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 30.0, 8.0, 30.0),
child: Text(
this.title,
style: new TextStyle(
color: Colors.blue,
fontSize: 20,
),),),);}
3.refresh_list_view_demo.dart
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Column(
children: <Widget>[
new Expanded(
child: RefreshListView(getListData, createListItem),
),],),);}}