使用flutter_allroundrefresh进行下拉刷新、

2019-07-12 本文已影响83人彭空空

在使用Flutter 进行demo调试、项目研发的时候，你是否为下拉刷新组件发愁，你是否为初始转圈、空数据页面发愁、网络差或服务器超时的错误页面发愁，如果有，请您了解一下这个物超所值的组件：flutter_allroundrefresh 。

flutter_allroundrefresh 特性

页面初始转圈
手机无网络错误页面
下拉刷新
上拉加载更多
网络差或服务器超时错误页面
无数据错误页面
登录失效处理
错误页面重试机制
定制转圈
定制错误页面
定制/适配状态码
支持国际化
支持 android 、ios

即从打开页面到展示数据或异常情况的处理方案

废话不多说：
Flutter Pub组件库之 flutter_allroundrefresh 地址
 Github之 flutter_allroundrefresh 地址欢迎 start
效果图&截图（在文章底部，由于图片较多较大，需要先看效果的童鞋请滑到最后）

**使用 flutter_allroundrefresh **
1.添加依赖

dependencies:
  flutter_allroundrefresh: ^2.0.0

2.引入

import 'package:flutter_allroundrefresh/future_refresh.dart';

3.在入口方法中进行初始化

AFutureWidget.init( );

3.1.在入口方法中进行初始化（init方法中配置国际化）

AFutureWidget.init(  loadingText: '加载中...',...);

4.具体页面的使用

class SimplePage3 extends StatefulWidget {
  @override
  _SimplePage3State createState() => _SimplePage3State();}

class _SimplePage3State extends State<SimplePage3> with TickerProviderStateMixin {
  var page = 1;
  List<SimpleDataBean> modelList = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( title: const Text('AFutureWidget 组件DEMO'),),
      body: AFutureWidget(
        childWidget: yourContentWidget(),//必填
        //errorWidget: YourError1Widget(),//支持自定义
        //progressWidget: YourProgress2Widget(),//支持自定义
        fRefresh: SimpleDao.getData10(page: 1),//必填，page 必须写1
        fLoading: SimpleDao.getData10(page: page),//有加载更多必填
        onLoadingCallback: () {page = page + 1;setState(() {});},//有加载更多必填
        onRefreshCallback: () {page = 1;modelList.clear();setState(() {}); },//必填
        tokenInvalidCallback: () { },,//登录失效回调
        dataCallback: (List<dynamic> data) {
          data.forEach((v) {
            modelList.add(new SimpleDataBean.fromJson(v));
          });
          setState(() {});
        },//必填
      ),
    );
  }
 Widget yourContentWidget() {
    return ListView.builder(
      itemCount: modelList.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          alignment: Alignment.center,
          height: 80.0,
          child: Text('${modelList[index].name}'),
        ); },);
  }
}

为了达到一目了然的效果，上面贴上了整个页面的代码，不难发现
1.该页面只需要配置flutter_allroundrefresh 下的具体组件AFutureWidget 即可
2.具体页面的ListView/GridView 的代码，即Item样式编写

注意事项
1.获取接口API数据的方法，即fRefresh的参数（方法），这里需要注意，无论是get/post/put/delete请求，具体方法的返回值必须是Future<dynamic>，详情参考demo
2.errorWidget: YourError1Widget(),//支持自定义错误页面，demo/截图展示了默认纯文字、静态图、和动图三种效果
3.progressWidget: YourProgress2Widget(),//支持自定义初始转圈，demo/截图展示了默认转圈、动图两种效果
4.tokenInvalidCallback： 登录失效的回调方法，根据项目决定是否需要（作者的项目是弹出对话框，点击确定进入登录页面）
5.接口API返回的json建议使用 json_to_dart 进行格式化（有个小秘密在demo里。。。）

5.接口API返回的json格式说明（若你的后台有自己的code规则则需要在初始化方法AFutureWidget.init();中进行适配）

{
    "code": "默认200访问成功，404无数据，900登录失效",
    "msg": "",
    "data": {},//  "data": [],
}

完成到这里，接入 flutter_allroundrefresh 组件的优势也就很清晰了
1.编写/测试接口API数据获取的方法（作者使用了java中的dao概念，木有使用bloc），
2.编写具体页面的Item
3.那么整体项目就包含：载框架搭建+dao层+UI层,不管是个人开发，还是团队开发，项目就很清晰了，分工与工作量就都很好分配了（非列表页面即将适配哈，以及返回页面刷新的问题）