一步一步搭建Flutter开发架子-刷新加载，工具类

接上文。这篇主要封装一下列表的刷新加载。还有一些工具类的封装。

数据的刷新加载

加入第四个库， 同样在pubspec.yaml里面添加

flutter_easyrefresh: ^2.1.8

引入头文件

import 'package:flutter_easyrefresh/easy_refresh.dart';

先实现一个简单的基础的效果，如果没有特殊设计的项目，用这个就可以了

EasyRefreshController _controller = EasyRefreshController();
int count = 10;

@override
  void initState() {
    super.initState();
    EasyRefresh.defaultHeader = ClassicalHeader(
      enableInfiniteRefresh: false,
      refreshText: '下啦刷新',
      refreshReadyText: '正在下啦',
      refreshingText: '刷新中',
      refreshedText: 'ok',
      refreshFailedText: '加载失败',
      noMoreText: '没有更对数据',
      infoText: "更新时间：14:55",
    );
    EasyRefresh.defaultFooter = ClassicalFooter(
      enableInfiniteLoad: false,
      loadText: '上啦加载',
      loadReadyText: '准备加载数据',
      loadingText: '加载中',
      loadedText: 'ok',
      loadFailedText: '加载失败',
      noMoreText: '我是有底线的',
      infoText: '更新时间： 14:55',
    );
  }

EasyRefresh(
  controller: _controller,
  onRefresh: () async {},
  onLoad: () async {
     await Future.delayed(Duration(seconds: 2), () {
       if (mounted) {
           setState(() {
             count += 10;
           });
       }
    });
  },
 child: ListView.builder(
      itemBuilder: (BuildContext context, int position) {
         return ListTile(
            title: Text('测试'),
            subtitle: Text('一些描述'),
         );
      },
      itemCount: count,
))

每一个页面写一个这个有点麻烦，封装成一个组件，引用调用好一些，下面封装一下使用，创建一个common_list文件ps：这个页可以结合上文的common_widget一起使用。

 EasyRefreshController _controller = EasyRefreshController();
  int currentPage = 0;
  List dataList = [];

  @override
  void initState() {
    super.initState();
    EasyRefresh.defaultHeader = ClassicalHeader(
      enableInfiniteRefresh: false,
      refreshText: '下啦刷新',
      refreshReadyText: '正在下啦',
      refreshingText: '刷新中',
      refreshedText: 'ok',
      refreshFailedText: '加载失败',
      noMoreText: '没有更对数据',
      infoText: "更新时间：14:55",
    );
    EasyRefresh.defaultFooter = ClassicalFooter(
      enableInfiniteLoad: false,
      loadText: '上啦加载',
      loadReadyText: '准备加载数据',
      loadingText: '加载中',
      loadedText: 'ok',
      loadFailedText: '加载失败',
      noMoreText: '我是有底线的',
      infoText: '更新时间： 14:55',
    );
    getNetwork();
  }

  void getNetwork() async {
    List arr = await widget.networkApi(currentPage);
    if (mounted) {
      setState(() {
        dataList = arr;
      });
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return EasyRefresh(
        controller: _controller,
        onRefresh: () async {
          if (mounted) {
            setState(() {
              currentPage = 0;
            });
            getNetwork();
          }
        },
        onLoad: () async {
          if (mounted) {
            setState(() {
              currentPage += 1;
            });
            getNetwork();
          }
        },
        child: ListView.builder(
          itemBuilder: widget.itemBuilder,
          itemCount: dataList.length,
        ));
  }

接下来是调用的部分

CommonListWiget(
  networkApi: (currentPage) async {
   Map result = await ReqHome.getListApi({
       'page': currentPage,
        'size': 5,
   });
   if (result != null) {
      if (mounted) {
          setState(() {
              dataList = reslut;
           });
            return dataList;
     }
   } else {
      return [];
  }
 },
 itemBuilder: (BuildContext context, int position) {
      return ListTile(
          title: Text('测试' + position.toString()),
          subtitle: Text('一些描述'),
     );
  },
)

把itemBuilder曝漏出来，方便实现逻辑，总体感觉还可以优化。欢迎谈论指导。想法是把网络请求页直接封装进去，刷新加载逻辑全部放进去。边学习边改进。先这样用😄

工具类

工具类这个就比较简单了，例如邮件，身份证，手机号，验证码， 获取屏幕尺寸， 时间戳转换 更改主题等。利用flustars库和GetX进行验证

更改主题模式

Get.changeTheme(ThemeData.dark());

验证

flustars库 的RegexUtil的api如下

isMobileSimple            : 简单验证手机号
isMobileExact             : 精确验证手机号
isTel                     : 验证电话号码
isIDCard                  : 验证身份证号码
isIDCard15                : 验证身份证号码 15 位
isIDCard18                : 简单验证身份证号码 18 位
isIDCard18Exact           : 精确验证身份证号码 18 位
isEmail                   : 验证邮箱
isURL                     : 验证 URL
isZh                      : 验证汉字
isDate                    : 验证 yyyy-MM-dd 格式的日期校验，已考虑平闰年
isIP                      : 验证 IP 地址
isUserName                : 验证用户名
isQQ                      : 验证 QQ

同样的flustars库 DateUtil ScreenUtil工具。大家可以看一下就不一一列出来了

one more things。。。。。。

• flutter中webView的使用姿势