Flutter移动电商实战 --（28）列表页_商品列表后台接口调试

妖狐艹你老母 2023-06-01 06:04 12阅读 0赞

主要调试商品列表页的接口

![1090399-20190901183329735-742662012.png][]

这个接口是最难的因为有大类、小类还有上拉加载

# 先配置接口 #

![1090399-20190901183403459-2047541525.png][]

config/service\_url.dart

//const serviceUrl='http://test.baixingliangfan.cn/baixing/';//2019-04-12失效
    const serviceUrl='https://wxmini.baixingliangfan.cn/baixing/';//从群里那个github的地址找到的
    const servicePath={
      'homePageContent':serviceUrl+'wxmini/homePageContent',//商店首页信息
      'homePageBelowConten':serviceUrl+'wxmini/homePageBelowConten',//商城首页热卖商品
      'getCategory':serviceUrl+'wxmini/getCategory',//商品类别信息
      'getMallGoods':serviceUrl+'wxmini/getMallGoods',//商品分类的商品列表
    };

# 编写新类调试接口 #

stful快生生成widget.CategoryGoodsList

![1090399-20190901183508288-1564791107.png][]

然后写一个内部方法，调用我们的后端接口

![1090399-20190901183537385-151625503.png][]

然后需要调用这个内部方法

在我们的initState里面调用

![1090399-20190901183607406-183773455.png][]

然后把我们的商品列表放到右边的Column的下边调用。

![1090399-20190901183635437-1112748655.png][]

运行页面，可以看到后台输出的数据。这样就说明我的接口已经调通了。

![1090399-20190901183716190-981794132.png][]

# 最终源码： #

category\_page.dart

import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'dart:convert';
    import '../model/category.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:provide/provide.dart';
    import '../provide/child_category.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();//请求接口的数据
      }
      @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;//当前大类的子类的列表
            Provide.value<ChildCategory>(context).getChildCategory(childList);
          },
          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);
        });
      }
    }
    
    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(childCategory.childCategoryList[index]);
                },
              ),
            );
          }
        );
      }
    
      Widget _rightInkWell(BxMallSubDto item){
        return InkWell(
          onTap: (){},//事件留空
          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)),
            ),
          ),
        );
      }
    }
    
    //商品列表 ，可以上拉加载
    class CategoryGoodsList extends StatefulWidget {
      @override
      _CategoryGoodsListState createState() => _CategoryGoodsListState();
    }
    
    class _CategoryGoodsListState extends State<CategoryGoodsList> {
      @override
      void initState() {
        _getGoodsList();
        super.initState();
      }
      @override
      Widget build(BuildContext context) {
        return Container(
          child: Text('商品列表'),
        );
      }
      void _getGoodsList() async {
        var data={
          'categoryId':4,//白酒的默认类别
          'CategorySubId':"",
          'page':1
        };
        await request('getMallGoods',formData: data).then((val){
          var data=json.decode(val.toString());
          print('分类商品列表》》》》》》》》》》》${val}');
        });
      }
    }

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

[1090399-20190901183329735-742662012.png]: /images/20230601/2650711888e3496090903b6fe7ccd313.png
[1090399-20190901183403459-2047541525.png]: /images/20230601/c61261bd22f64a32837fdb4c7591ba6e.png
[1090399-20190901183508288-1564791107.png]: /images/20230601/29e8209244b5427b85bf9de21b4c7b3c.png
[1090399-20190901183537385-151625503.png]: /images/20230601/29858e008eb24dafa4446055b2577e38.png
[1090399-20190901183607406-183773455.png]: /images/20230601/8993548734e44f1ebbca3834b0ad1217.png
[1090399-20190901183635437-1112748655.png]: /images/20230601/fd2fb4698b2749a79be0c4820b4d3883.png
[1090399-20190901183716190-981794132.png]: /images/20230601/62bb1007f75543cdb7006d4ee9060355.png