Flutter-防京东商城项目-分类控制器获取数据-08

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果图：

本章目标：
1.分类控制器获取数据赋值给控件

接口http://jd.itying.com/api/pcate
获取回来的数据

{"result":[{"_id":"59f1e1ada1da8b15d42234e9","title":"电脑办公","status":"1","pic":"","pid":"0","sort":"100"},{"_id":"59f1e1e880e7ed050cec999d","title":"女装内衣","status":1,"pic":"","pid":"0","sort":"100"},{"_id":"59f1e4659bfd8f3bd030eed3","title":"运动户外","status":1,"pic":"","pid":"0","sort":"100"},{"_id":"59f1e46e9bfd8f3bd030eed4","title":"手机数码","status":"1","pic":"","pid":"0","sort":"100"},{"_id":"59f1e47e9bfd8f3bd030eed5","title":"化妆品","status":"1","pic":"","pid":"0","sort":"100"},{"_id":"5a04251e010e711234661438","title":"箱包","status":"1","pic":"","pid":"0","sort":"100"},{"_id":"5a04261e010e71123466143a","title":"女鞋","status":1,"pic":"","pid":"0","sort":"100"},{"_id":"5a042e29010e711234661443","title":"汽车用品","status":"1","pic":"","pid":"0","sort":"100"},{"_id":"5a042f27010e711234661446","title":"酒水饮料","status":"1","pic":"","pid":"0","sort":"100"}]}

模型网址 https://javiercbk.github.io/json_to_dart/

模型名称： CateModel

修改模型类型 Object status;

最终模型代码：

class CateModel {
  List<CateItemModel> result;

  CateModel({this.result});

  CateModel.fromJson(Map<String, dynamic> json) {
    if (json['result'] != null) {
      result = new List<CateItemModel>();
      json['result'].forEach((v) {
        result.add(new CateItemModel.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.result != null) {
      data['result'] = this.result.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class CateItemModel {
  String sId;
  String title;
  Object status;
  String pic;
  String pid;
  String sort;

  CateItemModel({this.sId, this.title, this.status, this.pic, this.pid, this.sort});

  CateItemModel.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
    status = json['status'];
    pic = json['pic'];
    pid = json['pid'];
    sort = json['sort'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['_id'] = this.sId;
    data['title'] = this.title;
    data['status'] = this.status;
    data['pic'] = this.pic;
    data['pid'] = this.pid;
    data['sort'] = this.sort;
    return data;
  }
}

去到分类控制器 增加下面代码

import '../../services/screenAdaper.dart';//用于屏幕适配
import '../../model/CateModel.dart';//用于存储网络获取回来的数据
import '../../config/Config.dart';//域名，配置文件
import 'package:dio/dio.dart';//第三方网络获取数据

写在_CategoryPageState里面

int _selectIndex=0;

List _leftCateList=[];
List _rightCateList=[];

@override
void initState() {
  super.initState();
  _getLeftCateData();

}

//左侧分类接口
_getLeftCateData() async{
  var api = '${Config.domain}api/pcate';
  var result = await Dio().get(api);
  var leftCateList = new CateModel.fromJson(result.data);
  // print(leftCateList.result);
  setState(() {
    this._leftCateList = leftCateList.result;
  });
  _getRightCateData(leftCateList.result[0].sId);
}

//右侧分类接口
_getRightCateData(pid) async{
  var api = '${Config.domain}api/pcate?pid=${pid}';
  var result = await Dio().get(api);
  var rightCateList = new CateModel.fromJson(result.data);
  // print(rightCateList.result);
  setState(() {
    this._rightCateList = rightCateList.result;
  });
}

开始赋值
修改下面标红色部分



上面红色部分的全部代码

Widget _leftCateWidget(leftWidth){

  if(this._leftCateList.length>0){//————————————————————————————————————————

    return Container(
      width: leftWidth,
      height: double.infinity,
      // color: Colors.red,
      child: ListView.builder(
        itemCount: this._leftCateList.length,//————————————————————————————————————————
        itemBuilder: (context,index){
          return Column(
            children: <Widget>[
              InkWell(
                onTap: (){
                  setState(() {
                    _selectIndex= index;//————————————————————————————————————————
                    this._getRightCateData(this._leftCateList[index].sId);//———————------------
                  });
                },
                child: Container(
                  width: double.infinity,
                  height: ScreenAdaper.height(84),
                  padding: EdgeInsets.only(top:ScreenAdaper.height(24)),
                  child: Text("${this._leftCateList[index].title}",textAlign: TextAlign.center),//—————————

                ),
              ),
              Divider(height: 1),
            ],
          );
        },

      ),
    );
  }else{//————————————————————————————————————————
    return Container(//————————————————————————————————————————
        width: leftWidth,//————————————————————————————————————————
        height: double.infinity//————————————————————————————————————————
    );//————————————————————————————————————————
  }//————————————————————————————————————————
}

上面红色部分的全部代码

Widget _rightCateWidget(rightItemWidth,rightItemHeight){

  if(this._rightCateList.length>0){//————————————————————————————————————————
    return Expanded(
      flex: 1,
      child: Container(
          padding: EdgeInsets.all(10),
          height: double.infinity,
          color: Color.fromRGBO(240, 246, 246, 0.9),
          child: GridView.builder(

            gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount:3,
                childAspectRatio: rightItemWidth/rightItemHeight,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10
            ),
            itemCount: this._rightCateList.length,//————————————————————————————————————————
            itemBuilder: (context,index){

              //处理图片
              String pic=this._rightCateList[index].pic;//————————————————————————————————————————
              pic=Config.domain+pic.replaceAll('\\', '/');//————————————————————————————————————————

              return Container(
                // padding: EdgeInsets.all(10),
                child: Column(
                  children: <Widget>[

                    AspectRatio(
                      aspectRatio: 1/1,
                      child: Image.network("${pic}",fit: BoxFit.cover),//—————————-----------------
                    ),
                    Container(
                      height: ScreenAdaper.height(28),
                      child: Text("${this._rightCateList[index].title}"),//——————————-----------
                    )
                  ],
                ),
              );
            },
          )
      ),
    );
  }else{//————————————————————————————————————————
 //————————————————————————————————————————
    return Expanded(
        flex: 1,
        child: Container(
          padding: EdgeInsets.all(10),
          height: double.infinity,
          color: Color.fromRGBO(240, 246, 246, 0.9),
          child: Text("加载中..."),
        )
    );
//————————————————————————————————————————
  }//————————————————————————————————————————
}