Flutter ListView封装，下拉刷新、上拉加载更多

Flutter ListView封装，下拉刷新、上拉加载更多

​ 封装了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

1. refresh_list_view.dart

​ 可以下拉刷新、上拉加载更多的ListView

@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);
  }

​ RefreshIndicator：一个Material风格的下拉刷新组件，包含一个可滚动的子组件，当子组件下拉是会有一个圆形刷新图标，当下拉距离足够的时候，会触发onRefresh，而在onRefresh中会去刷新数据。

当子组件太短而不能滚动的时候，需要添加physics: const AlwaysScrollableScrollPhysics(),否则下拉刷新和上拉加载更多都无效，无法触发了。

​ ListView：itemBuilder用于渲染子item，controller添加一个ScrollController，用于响应滚动事件，监听滚动到底部，做加载更多处理，同时ScrollController可以跳转到指定位置，记住滚动位置等。

@override
void initState() {
  super.initState();
  _loadMore();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      //滚动到最后请求更多
      _loadMore();
    }
  });
}

​ 在初始换state中首先通过_loadMore()获取数据，同时使用_scrollController监听滚动滚动的位置，当滚动到最底部的时候，会触发加载更多数据的方法。

//加载更多
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;
    });
  }
}

​ 加载更多的方法，模拟了一个网络请求，当有数据返回的时候，通过setState将数据更新回state中，实现UI的刷新。下拉刷新的方法类似，不做过多介绍。

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,
        ),),),);}

​ 不做过多介绍，可以根据自己的需要定制UI，现在只显示了一个TextView。

3.refresh_list_view_demo.dart

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: [
          new Expanded(
            child: RefreshListView(getListData, createListItem),
          ),],),);}}

​ getListData、createListItem分别是获取数据和渲染子item的方法，传递方法进去(比JAVA灵活多了)自己定制更灵活。

以上是一个下拉刷新、上拉加载更多的ListView的简单封装，后续持续优化，方便使用。

更多更新关注微信公众号“Flutter入门”，知乎同名专栏