Flutter移动电商实战 --（20）首页上拉加载更多功能的制作

这节课学习一下上拉加载效果，其实现在上拉加载的插件有很多，但是还没有一个插件可以说完全一枝独秀，我也找了一个插件，这个插件的优点就是服务比较好，作者能及时回答大家的问题。我觉的选插件也是选人，人对了，插件就对了。

flutter_easyrefresh简介

flutter_easyrefresh官方简介：

正如名字一样，EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件，但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义。使用Flutter强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大，稳定，成熟的下拉刷新框架。

flutter_easyrefresh优点:

• 能够自定义酷炫的Header和Footer，也就是上拉和下拉的效果。
• 更新及时，不断在完善，录课截至时已经是v1.2.7版本了。
• 有一个辅导群，虽然文档不太完善，但是有辅导群和详细的案例。
• 回掉方法简单，这个具体可以看下面的例子。

引入依赖

直接在pubspec.yaml中的dependencies中进行引入，主要要用最新版本，文章中的版本不一定是最新版本。

dependencies:
 flutter_easyrefresh: ^1.2.7

引入后，在要使用的页面用import引入package，代码如下：

import 'package:flutter_easyrefresh/easy_refresh.dart';

制作上拉加载效果

使用这个插件，要求我们必须是一个ListView，所以我们要改造以前的代码，改造成ListView。

return EasyRefresh(
      child: ListView(
        children: <Widget>[
            SwiperDiy(swiperDataList:swiperDataList ),   //页面顶部轮播组件
            TopNavigator(navigatorList:navigatorList),   //导航组件
            AdBanner(advertesPicture:advertesPicture), 
            LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone),  //广告组件  
            Recommend(recommendList:recommendList),    
            FloorTitle(picture_address:floor1Title),
            FloorContent(floorGoodsList:floor1),
            FloorTitle(picture_address:floor2Title),
            FloorContent(floorGoodsList:floor2),
            FloorTitle(picture_address:floor3Title),
            FloorContent(floorGoodsList:floor3),
            _hotGoods(),
            
          ],
    ) ,
    loadMore: ()async{
        print('开始加载更多');
        var formPage={'page': page};
        await  request('homePageBelowConten',formData:formPage).then((val){
          var data=json.decode(val.toString());
          List<Map> newGoodsList = (data['data'] as List ).cast();
          setState(() {
            hotGoodsList.addAll(newGoodsList);
            page++; 
          });
        });
      },
  );
  
  
}else{
  return Center(
    child: Text('加载中'),
    
  );
}

具体的解释我就在视频中进行了，因为这个还是比较复杂的。

自定义上拉加载效果

因为它自带的样式是蓝色的，与我们的界面不太相符，所以我们改造一下，它的底部上拉刷新效果。如果你有兴趣做出更炫酷的效果，可以自行查看一下Github，学习一下。

refreshFooter: ClassicsFooter(
        key:_footerKey,
        bgColor:Colors.white,
        textColor: Colors.pink,
        moreInfoColor: Colors.pink,
        showMore: true,
        noMoreText: '',
        moreInfo: '加载中',
        loadReadyText:'上拉加载....'

      ),

做到这步我们需要进行调试一下，然后看一下我们的效果。

本节总结：这节课主要学习了easy_refresh组件的介绍和使用，并结合项目案例做出了上拉加载的效果。