pull_to_refresh介紹

• 關(guān)于pull_to_refresh的介紹及簡單使用可參考 github

快速使用如下：

• pubspec.yaml使用pub包配置：

dependencies:
      pull_to_refresh: ^1.6.0

• app全局默認(rèn)配置

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return RefreshConfiguration(
      headerBuilder: () => WaterDropHeader(),
      // 配置頭部默認(rèn)下拉刷新視圖
      footerBuilder: () => ClassicFooter(),
      // 配置底部默認(rèn)上拉加載視圖
      headerTriggerDistance: 80.0,
      // 頭部觸發(fā)刷新的距離
      springDescription:
          SpringDescription(stiffness: 170, damping: 16, mass: 1.9),
      // 自定義彈回動(dòng)畫
      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';
...
  //每頁顯示數(shù)量
  static const int PAGE_SIZE = 10;
  //當(dāng)前為第幾頁
  int page = 1;
  //是否加載過數(shù)據(jù)
  bool loaded;
  //是否允許上拉
  bool _enablePullUp = true;
  //listview數(shù)據(jù)源
  List<OrderModel> orderItems = [];
  //刷新加載控制器
  RefreshController _refreshController =
      RefreshController(initialRefresh: false);

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

///構(gòu)建body部分widget
_buildListData() {
    //給listview增加父節(jié)點(diǎn)SmartRefresher
    return SmartRefresher(
      ///可在此通過header:和footer:指定個(gè)性效果
      //允許下拉
      enablePullDown: true,
      //允許上拉加載
      enablePullUp: _enablePullUp,
      //控制器
      controller: _refreshController,
      //刷新回調(diào)方法
      onRefresh: _onRefresh,
      //加載下一頁回調(diào)
      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);
      }
    }
  }
...

以上就能很方便的實(shí)現(xiàn)下拉刷新和上拉翻頁功能，pull_to_refresh預(yù)設(shè)了幾種常用的效果

1594310600369.jpg

如果對現(xiàn)有的各種效果不太滿意，還可以自己根據(jù)模板編寫個(gè)性效果