Flutter listview 使用“pull_to_refr

pull_to_refresh介绍

• 关于pull_to_refresh的介绍及简单使用可参考 github

快速使用如下：

• pubspec.yaml使用pub包配置：

dependencies:
      pull_to_refresh: ^1.6.0

• app全局默认配置

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return RefreshConfiguration(
      headerBuilder: () => WaterDropHeader(),
      // 配置头部默认下拉刷新视图
      footerBuilder: () => ClassicFooter(),
      // 配置底部默认上拉加载视图
      headerTriggerDistance: 80.0,
      // 头部触发刷新的距离
      springDescription:
          SpringDescription(stiffness: 170, damping: 16, mass: 1.9),
      // 自定义弹回动画
      maxOverScrollExtent: 100,
      //The maximum dragging range of the head. Set this property if a rush out of the view area occurs
      maxUnderScrollExtent: 0,
      // Maximum dragging range at the bottom
      enableScrollWhenRefreshCompleted: true,
      //This property is incompatible with PageView and TabBarView. If you need TabBarView to slide left and right, you need to set it to true.
      enableLoadingWhenFailed: true,
      //In the case of load failure, users can still trigger more loads by gesture pull-up.
      hideFooterWhenNotFull: false,
      // Disable pull-up to load more functionality when Viewport is less than one screen
      enableBallisticLoad: true,
      // trigger load more by BallisticScrollActivity
      child: MaterialApp(
      ......

• 页面中配合listView使用

import 'package:pull_to_refresh/pull_to_refresh.dart';
...
  //每页显示数量
  static const int PAGE_SIZE = 10;
  //当前为第几页
  int page = 1;
  //是否加载过数据
  bool loaded;
  //是否允许上拉
  bool _enablePullUp = true;
  //listview数据源
  List<OrderModel> orderItems = [];
  //刷新加载控制器
  RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("我的订单"),
      ),
      body: _buildBody(),
    );
  }

///构建body部分widget
_buildListData() {
    //给listview增加父节点SmartRefresher
    return SmartRefresher(
      ///可在此通过header:和footer:指定个性效果
      //允许下拉
      enablePullDown: true,
      //允许上拉加载
      enablePullUp: _enablePullUp,
      //控制器
      controller: _refreshController,
      //刷新回调方法
      onRefresh: _onRefresh,
      //加载下一页回调
      onLoading: _onLoading,
      child: ListView.builder(
        itemBuilder: (c, i) => ItemOrder(orderItems[i]),
        itemCount: orderItems.length,
      ),
    );
  }

  void _onRefresh() async {
    _loadData(true);
  }

  void _onLoading() async {
    _loadData(false);
  }

  void _initData() async {
    _loadData(true);
  }
  _loadData(final bool onRefresh) async {
    int pageNum;
    if(onRefresh){
      pageNum = 1;
    }else{
      pageNum = page+1;
    }
    Map<String, dynamic> query = new Map();
    query['pageNum'] = pageNum;
    query['pageSize'] = PAGE_SIZE;
    Response response = await HttpManager().get(Api.OUT_ORDER_LIST, query: query);
    if(response != null && response.statusCode == HttpStatus.ok){
      ResponseData responseData = ResponseData.fromJsonMap(response.data);
      if(responseData.isSuccess() && responseData.result != null) {
        dynamic result = responseData.result;
        PageResult pageResult = PageResult.fromJson(result);
        if(pageResult.pageNum == pageResult.pages){
          _enablePullUp = false;
        }
        if (pageResult.size > 0 && pageResult.rows != null &&
            pageResult.rows.length > 0) {
          page = pageNum;
          List<dynamic> rows = pageResult.rows;
          if (onRefresh) {
            loaded = true;
            orderItems.clear();
            _addList(rows);
            _refreshController.refreshCompleted();
          }else{
            _addList(rows);
            if (mounted) setState(() {});
            _refreshController.loadComplete();
          }
        }
        setState(() {
        });
      }
    }
  }
  _addList(List<dynamic> rows){
    for (int i = 0; i < rows.length; i++) {
      OrderModel item = OrderModel.fromJson(rows[i]);
      if (item != null) {
        orderItems.add(item);
      }
    }
  }
...

以上就能很方便的实现下拉刷新和上拉翻页功能，pull_to_refresh预设了几种常用的效果

1594310600369.jpg

如果对现有的各种效果不太满意，还可以自己根据模板编写个性效果