Flutter移动电商实战 --（35）列表页_上拉加载更多制作

冷不防 2023-06-01 06:04 6阅读 0赞

右侧列表上拉加载配合类别的切换

上拉加载需要一个page参数，当点击大类或者小类的时候，这个page就要变成1

# provide内定义参数 #

首先我们需要定义一个page的变量

下图是我们之前在首页的时候做的上拉加载代码，之前属性noMoreText我们没有设置值，这里我也需要把这个属性加入到provide里面去。

![1090399-20190908215300698-680485572.png][]

在大类和小类的初始化的方法内，都需要把page设置为1，然后把提示信息设置为空

![1090399-20190908215335676-923167197.png][]

然后我们需要做page增加的方法，上拉刷新的时候，这个page值是不断的增加的

再增加改变我们的noMoreText的值的方法

![1090399-20190908215405367-1588147582.png][]

# 引入fresh插件 #

category\_page.dart页面引入上拉刷新的插件

import 'package:flutter_easyrefresh/easy_refresh.dart';

我们在右侧的列表类里面，在列表的地方外层嵌套easy\_refresh

![1090399-20190908215504926-1194512061.png][]

我们复制首页之前写好的代码过来。

![1090399-20190908215534158-139325138.png][]

中间红框内是和原来的代码，上面refreshFooter部分是复制首页的代码过来的。下面的loadMore事件是自己写的

![1090399-20190908215608434-1502106587.png][]

再复制首页的footerKey

![1090399-20190908215632598-16759035.png][]

GlobalKey<RefreshFooterState> _footerkey=new GlobalKey<RefreshFooterState>();

这样key这里就不报错了。

![1090399-20190908215740670-1005309096.png][]

noMoreText用状态 管理里面的值

noMoreText: Provide.value<ChildCategory>(context).noMoreText,

![1090399-20190908215826974-1635487794.png][]

效果展示

![1090399-20190908215856403-1861308936.png][]

# loadMore回调函数补充完整 #

上拉加载更多和我们加载大类和小类是一样的 我们复制右侧的列表的数据获取的方法

下图是复制的右侧加载列表数据的方法

![1090399-20190908215932126-666526769.png][]

![1090399-20190908215957733-1458119087.png][]

![1090399-20190908220027563-940367335.png][]

下面这里，因为我们是不断的累计list的数据的 所以不能再使用等号了。

![1090399-20190908220053801-405750105.png][]

修改为使用addAll的方法

![1090399-20190908220134434-1314750664.png][]

# 调用我们获取数据的方法 #

修正一个地方，这个方法添加的地方是在最后一个花括号结束的上方 复制这个getMoreList的方法

![1090399-20190908220218897-796797271.png][]

有了上拉刷新的效果。但是点击小类的时候列表数据，不变化了

![1090399-20190908220251084-1886888660.png][]

![1090399-20190908220310995-1883999898.png][]

![1090399-20190908220331170-813494851.png][]

# 修正一个错误的地方 #

![1090399-20190908220400254-519172020.png][]

# 上拉刷新的效果 #

![1090399-20190908220424404-392137013.png][]

# page需要++ #

我们在调用上拉刷险的时候，没有调用page++

![1090399-20190908220456697-1385393991.png][]

# 存在问题 #

当我们一个类别上拉刷新了几次后，滚动条滚动到最下面了。当我们再去点击别的大类的时候，滚动条还是在这个位置上。滚动条没有滚动到最上面

![1090399-20190908220527112-289403519.png][]

只要切换大类的是时候，就返回我们的顶部，好用scrollController的jumpTo方法 跳转到0.0的位置

![1090399-20190908220559132-615658974.png][]

# 最终代码： #

provide/child\_category.dart

import 'package:flutter/material.dart';
    import '../model/category.dart';
    
    class ChildCategory with ChangeNotifier{
     List<BxMallSubDto> childCategoryList=[];
     int childIndex=0;//子类高亮索引
     String categoryId='4';//大类ID 白酒的id 默认为4
     String subId='';//小类ID
     int page=1;
     String noMoreText='';//显示没有数据的文字
      //大类切换逻辑
      getChildCategory(List<BxMallSubDto> list,String id){
        page=1;
        noMoreText='';
        childIndex=0;//每次点击大类，小类的索引都要清空掉
        categoryId=id;
        BxMallSubDto all=BxMallSubDto();
        all.mallCategoryId="00";
        all.mallCategoryId="00";
        all.comments="null";
        all.mallSubName='全部';
        childCategoryList=[all];
        //childCategoryList=list;
        childCategoryList.addAll(list);
        notifyListeners();//监听
      }
      //改变子类索引,indexs是从哪里来的呢？从我们具体的类中进行传递
      changeChildIndex(index,String id){
        page=1;
        noMoreText='';
        childIndex=index;//把传递过来的index赋值给我们的childIndex
        subId=id;
        notifyListeners();//通知
      }
      //增加Page的方法
      addPage(){
        page++;
        //notifyListeners();//这里不需要通知，因为我们只是page+1了并没有页面数据上的变化
      }
      //改变noMore的方法
      changeNoMore(String text){
        noMoreText=text;
        notifyListeners();//通知
      }
    }

provide/category\_goods\_list.dart

import 'package:flutter/material.dart';
    import '../model/categoryGoodsList.dart';
    
    class CategoryGoodsListProvide with ChangeNotifier{
     List<CategoryListData> goodsList=[];
     //点击大类时候更换商品列表
     getGoodsList(List<CategoryListData> list){
       goodsList=list;
       notifyListeners();
     }
    
     getMoreList(List<CategoryListData> list){
       goodsList.addAll(list);
       notifyListeners();
     }
    
    }

category\_page.dart

import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'dart:convert';
    import '../model/category.dart';
    import '../model/categoryGoodsList.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:provide/provide.dart';
    import '../provide/child_category.dart';
    import '../provide/category_goods_list.dart';
    import 'package:flutter_easyrefresh/easy_refresh.dart';
    
    class CategoryPage extends StatefulWidget {
      @override
      _CategoryPageState createState() => _CategoryPageState();
    }
    
    class _CategoryPageState extends State<CategoryPage> {
      @override
      Widget build(BuildContext context) {
        //_getCategory();
        return Scaffold(
          appBar: AppBar(title: Text('商品分类'),),
          body: Container(
            child: Row(
              children: <Widget>[
                LeftCategoryNav(),
                Column(
                  children: <Widget>[
                    RightCategoryNav(),
                    CategoryGoodsList()
                  ],
                )
              ],
            ),
          ),
        );
      }
    
     
    }
    
    //左侧大类导航
    class LeftCategoryNav extends StatefulWidget {
      @override
      _LeftCategoryNavState createState() => _LeftCategoryNavState();
    }
    
    class _LeftCategoryNavState extends State<LeftCategoryNav> {
      List list=[];
      var listIndex=0;
      @override
      void initState() { 
        super.initState();
        _getCategory();//请求接口的数据
        _getGoodsList();//参数是可选的默认是4 所以这里可以不用传值
      }
      @override
      Widget build(BuildContext context) {
        return Container(
          width: ScreenUtil().setWidth(180),
          decoration: BoxDecoration(
            border: Border(
              right: BorderSide(width:1.0,color: Colors.black12),//有边框
            )
          ),
          child: ListView.builder(
            itemCount: list.length,
            itemBuilder: (contex,index){
              return _leftInkWell(index);
            },
          ),
        );
      }
    
      Widget _leftInkWell(int index){
        bool isClick=false;
        isClick=(index==listIndex)?true:false;
        return InkWell(
          onTap: (){
            setState(() {
             listIndex=index; 
            });
            var childList=list[index].bxMallSubDto;//当前大类的子类的列表
            var categoryId=list[index].mallCategoryId;//大类的id
            Provide.value<ChildCategory>(context).getChildCategory(childList,categoryId);
            _getGoodsList(categoryId:categoryId);
          },
          child: Container(
            height: ScreenUtil().setHeight(100),
            padding: EdgeInsets.only(left:10.0,top:10.0),
            decoration: BoxDecoration(
              color: isClick?Color.fromRGBO(236, 236, 236, 1.0): Colors.white,
              border: Border(
                bottom: BorderSide(width: 1.0,color: Colors.black12)
              )
            ),
            child: Text(
              list[index].mallCategoryName,
              style: TextStyle(fontSize: ScreenUtil().setSp(28)),//设置字体大小，为了兼容使用setSp
            ),
          ),
        );
      }
       void _getCategory() async{
        await request('getCategory').then((val){
          var data=json.decode(val.toString());
          //print(data);
          CategoryModel category= CategoryModel.fromJson(data);
          setState(() {
           list=category.data; 
          });
          Provide.value<ChildCategory>(context).getChildCategory(list[0].bxMallSubDto,list[0].mallCategoryId);
        });
      }
    
      void _getGoodsList({String categoryId}) {
        var data={
          'categoryId':categoryId==null?'4':categoryId,//白酒的默认类别
          'categorySubId':"",
          'page':1
        };
        request('getMallGoods',formData: data).then((val){
          var data=json.decode(val.toString());
          CategoryGoodsListModel goodsList=CategoryGoodsListModel.fromJson(data);//这样就从json'转换成了model类
          //print('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>:${goodsList.data[0].goodsName}');
          // setState(() {
          //  list=goodsList.data; 
          // });
          Provide.value<CategoryGoodsListProvide>(context).getGoodsList(goodsList.data);
        });
      }
    }
    
    class RightCategoryNav extends StatefulWidget {
      @override
      _RightCategoryNavState createState() => _RightCategoryNavState();
    }
    
    class _RightCategoryNavState extends State<RightCategoryNav> {
      //List list = ['名酒','宝丰','北京二锅头','舍得','五粮液','茅台','散白'];
      @override
      Widget build(BuildContext context) {
        return Provide<ChildCategory>(
          builder: (context,child,childCategory){
            return  Container(
              height: ScreenUtil().setHeight(80),
              width: ScreenUtil().setWidth(570),//总的宽度是750 -180
              decoration: BoxDecoration(
                color: Colors.white,//白色背景
                border: Border(
                  bottom: BorderSide(width: 1.0,color: Colors.black12)//边界线
                )
              ),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: childCategory.childCategoryList.length,
                itemBuilder: (context,index){
                  return _rightInkWell(index,childCategory.childCategoryList[index]);
                },
              ),
            );
          }
        );
      }
    
      Widget _rightInkWell(int index,BxMallSubDto item){
        bool isClick=false;
        isClick=(index==Provide.value<ChildCategory>(context).childIndex)?true:false;
    
        return InkWell(
          onTap: (){
            Provide.value<ChildCategory>(context).changeChildIndex(index,item.mallSubId);
            _getGoodsList(item.mallSubId);
          },//事件留空
          child: Container(//什么都加一个container，这样好布局
            padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),//上下是10 左右是5.0
            child: Text(
              item.mallSubName,
              style:TextStyle(
                fontSize: ScreenUtil().setSp(28),
                color: isClick?Colors.pink:Colors.black
              ),
            ),
          ),
        );
      }
      void _getGoodsList(String categorySubId) {
        var data={
          'categoryId':Provide.value<ChildCategory>(context).categoryId,//大类ID
          'categorySubId':categorySubId,
          'page':1
        };
        request('getMallGoods',formData: data).then((val){
          var data=json.decode(val.toString());
          CategoryGoodsListModel goodsList=CategoryGoodsListModel.fromJson(data);//这样就从json'转换成了model类
          if(goodsList.data==null){
            Provide.value<CategoryGoodsListProvide>(context).getGoodsList([]);
          }else{
            Provide.value<CategoryGoodsListProvide>(context).getGoodsList(goodsList.data);
          }
          
        });
      }
    }
    
    //商品列表 ，可以上拉加载
    class CategoryGoodsList extends StatefulWidget {
      @override
      _CategoryGoodsListState createState() => _CategoryGoodsListState();
    }
    
    class _CategoryGoodsListState extends State<CategoryGoodsList> {
       GlobalKey<RefreshFooterState> _footerkey=new GlobalKey<RefreshFooterState>();
       var scrollController=new ScrollController();
      @override
      void initState() {
        //_getGoodsList();
        super.initState();
      }
      @override
      Widget build(BuildContext context) {
        return Provide<CategoryGoodsListProvide>(
          builder: (context,child,data){
            try {
              if(Provide.value<ChildCategory>(context).page==1){
                //列表位置，放到最上边
                scrollController.jumpTo(0.0);
              }
            } catch (e) {
              print('进入页面第一次初始化:${e}');
            }
            if(data.goodsList.length>0){
                return  Expanded(
                  child: Container(
                    width: ScreenUtil().setWidth(570),
                    //height: ScreenUtil().setHeight(974),
                    child: EasyRefresh(
                       refreshFooter: ClassicsFooter(
                          key: _footerkey,
                          bgColor: Colors.white,//背景颜色
                          textColor: Colors.pink,//粉红色
                          moreInfoColor: Colors.white,
                          showMore: true,
                          noMoreText: Provide.value<ChildCategory>(context).noMoreText,//具体也不知道到没到底 所以这里直接设置为空就不再显示了
                          moreInfo: '加载中',
                          loadReadyText: '上拉加载......',//网上拉 显示的文字
                        ),
                        child:   ListView.builder(
                          controller: scrollController,
                          itemCount: data.goodsList.length,
                          itemBuilder: (contex,index){
                            return _listWidget(data.goodsList,index);
                          },
                        ),
                        loadMore: () async{
                          print('上拉加载更多......');
                          _getMoreList();
                        },
                    )
                  ),
                );
            }else{
              return Text('暂时没有数据');
            }
           
          },
        );
      }
       
      void _getMoreList() {
         Provide.value<ChildCategory>(context).addPage();
          var data={
            'categoryId':Provide.value<ChildCategory>(context).categoryId,//大类ID
            'categorySubId':Provide.value<ChildCategory>(context).subId,
            'page':Provide.value<ChildCategory>(context).page
          };
          request('getMallGoods',formData: data).then((val){
            var data=json.decode(val.toString());
            CategoryGoodsListModel goodsList=CategoryGoodsListModel.fromJson(data);//这样就从json'转换成了model类
            if(goodsList.data==null){
              Provide.value<ChildCategory>(context).changeNoMore('没有更多了');
            }else{
              Provide.value<CategoryGoodsListProvide>(context).getMoreList(goodsList.data);
            }
            
          });
        }
    
    
      //}
      
    
      Widget _goodsImage(List newList,index){
        return Container(
          width: ScreenUtil().setWidth(200),//设置200的宽度 限制
          child: Image.network(newList[index].image),
        );
      }
      Widget _goodsName(List newList,index){
        return Container(
          padding: EdgeInsets.all(5.0),//上下左右都是5.0的内边距
          width: ScreenUtil().setWidth(370),//370是一个大约的值
          child: Text(
            newList[index].goodsName,
            maxLines: 2,//最多显示2行内容
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontSize: ScreenUtil().setSp(28)),//字体大小
          ),
        );
      }
    
      Widget _goodsPrice(List newList,index){
        return Container(
          margin: EdgeInsets.only(top:20.0),//和上面的外间距
          width: ScreenUtil().setWidth(370),//370是一个大约的值
          child: Row(
            children: <Widget>[
              Text(
                '价格￥${newList[index].presentPrice}',
                style: TextStyle(color: Colors.pink,fontSize: ScreenUtil().setSp(30)),
              ),
              Text(
                '价格￥${newList[index].oriPrice}',
                style: TextStyle(
                  color: Colors.black26,
                  decoration: TextDecoration.lineThrough
                ),//删除线的样式
              )
            ],
          ),
        );
      }
    
      Widget _listWidget(List newList,int index){
        return InkWell(
          onTap: (){},
          child: Container(
            padding: EdgeInsets.only(top:5.0,bottom:5.0),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(width: 1.0,color: Colors.black12)
              )
            ),
            child: Row(
              children: <Widget>[
                _goodsImage(newList,index),
                Column(
                  children: <Widget>[
                    _goodsName(newList,index),
                    _goodsPrice(newList,index)
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/crazycode2/p/11456037.html

[1090399-20190908215300698-680485572.png]: /images/20230601/13777f01855649849a83fd30726698b4.png
[1090399-20190908215335676-923167197.png]: /images/20230601/678582c5643e4d789a1dc4fcfd76ce93.png
[1090399-20190908215405367-1588147582.png]: /images/20230601/a92f99156e684f51b5ba1f447c67819a.png
[1090399-20190908215504926-1194512061.png]: /images/20230601/6036cf7220f14e669d2f3e2fc9597352.png
[1090399-20190908215534158-139325138.png]: /images/20230601/8934394581d3454f9dfb23f4ccc6abd3.png
[1090399-20190908215608434-1502106587.png]: /images/20230601/97c24406ca934097b80823ba89e3e0c4.png
[1090399-20190908215632598-16759035.png]: /images/20230601/9a0b32e21c1b43eaa7fb6306fce1e04a.png
[1090399-20190908215740670-1005309096.png]: /images/20230601/a9339d769c944719ac0d33e14f9b35b1.png
[1090399-20190908215826974-1635487794.png]: /images/20230601/a678ed67d04c4a1286c8e19ce768b260.png
[1090399-20190908215856403-1861308936.png]: /images/20230601/0b6800e583224929952804a8e45684b9.png
[1090399-20190908215932126-666526769.png]: /images/20230601/a680c9e695524add8b91b19fd25971bc.png
[1090399-20190908215957733-1458119087.png]: /images/20230601/2dfe63cc38624fd5b48de6eca152f08b.png
[1090399-20190908220027563-940367335.png]: /images/20230601/0fb3b1cd350743738bf594b7c1041aee.png
[1090399-20190908220053801-405750105.png]: /images/20230601/0afbf8cb3a2c4cf89badfc4c8277bdfb.png
[1090399-20190908220134434-1314750664.png]: /images/20230601/2c176eb36ad24036816c56c2b41ba7eb.png
[1090399-20190908220218897-796797271.png]: /images/20230601/fd73b6609f5d423dbdf756a607120c63.png
[1090399-20190908220251084-1886888660.png]: /images/20230601/93f4a5b779074c089235cb1f7e3ff700.png
[1090399-20190908220310995-1883999898.png]: /images/20230601/740420a2ed1a46be8fb1f50cd44c1fe2.png
[1090399-20190908220331170-813494851.png]: /images/20230601/dd890c5344374cbab2e828bbb5c9c58d.png
[1090399-20190908220400254-519172020.png]: /images/20230601/0a7db148173548be91a75c9c1ec88fcb.png
[1090399-20190908220424404-392137013.png]: /images/20230601/df19707894674fcb88101c08fa24a421.png
[1090399-20190908220456697-1385393991.png]: /images/20230601/da7cbf351f064c31bbce5e7fcda9ca94.png
[1090399-20190908220527112-289403519.png]: /images/20230601/f2ed596096d2433ab87ac7d1426b4720.png
[1090399-20190908220559132-615658974.png]: /images/20230601/a8055880ab164cd0b0af201f49b7b60d.png