Flutter移动电商实战 --（23）分类页_左侧类别导航制作

蔚落 2023-06-01 05:59 69阅读 0赞

![1090399-20190901163517414-71821326.png][]

# 自动生成dart类 #

[https://javiercbk.github.io/json\_to\_dart/][https_javiercbk.github.io_json_to_dart]

![1090399-20190901163602673-1916230587.png][]

生成的代码

class Autogenerated {
      String code;
      String message;
      List<Data> data;
    
      Autogenerated({this.code, this.message, this.data});
    
      Autogenerated.fromJson(Map<String, dynamic> json) {
        code = json['code'];
        message = json['message'];
        if (json['data'] != null) {
          data = new List<Data>();
          json['data'].forEach((v) {
            data.add(new Data.fromJson(v));
          });
        }
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['code'] = this.code;
        data['message'] = this.message;
        if (this.data != null) {
          data['data'] = this.data.map((v) => v.toJson()).toList();
        }
        return data;
      }
    }
    
    class Data {
      String mallCategoryId;
      String mallCategoryName;
      List<BxMallSubDto> bxMallSubDto;
      Null comments;
      String image;
    
      Data(
          {this.mallCategoryId,
          this.mallCategoryName,
          this.bxMallSubDto,
          this.comments,
          this.image});
    
      Data.fromJson(Map<String, dynamic> json) {
        mallCategoryId = json['mallCategoryId'];
        mallCategoryName = json['mallCategoryName'];
        if (json['bxMallSubDto'] != null) {
          bxMallSubDto = new List<BxMallSubDto>();
          json['bxMallSubDto'].forEach((v) {
            bxMallSubDto.add(new BxMallSubDto.fromJson(v));
          });
        }
        comments = json['comments'];
        image = json['image'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['mallCategoryId'] = this.mallCategoryId;
        data['mallCategoryName'] = this.mallCategoryName;
        if (this.bxMallSubDto != null) {
          data['bxMallSubDto'] = this.bxMallSubDto.map((v) => v.toJson()).toList();
        }
        data['comments'] = this.comments;
        data['image'] = this.image;
        return data;
      }
    }
    
    class BxMallSubDto {
      String mallSubId;
      String mallCategoryId;
      String mallSubName;
      String comments;
    
      BxMallSubDto(
          {this.mallSubId, this.mallCategoryId, this.mallSubName, this.comments});
    
      BxMallSubDto.fromJson(Map<String, dynamic> json) {
        mallSubId = json['mallSubId'];
        mallCategoryId = json['mallCategoryId'];
        mallSubName = json['mallSubName'];
        comments = json['comments'];
      }
    
      Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['mallSubId'] = this.mallSubId;
        data['mallCategoryId'] = this.mallCategoryId;
        data['mallSubName'] = this.mallSubName;
        data['comments'] = this.comments;
        return data;
      }
    }

复制过来以后，改改类的名字

![1090399-20190901163804316-974363437.png][]

这里就是用我们新生成的model类

![1090399-20190901163832062-242022036.png][]

# 开始做左侧类别导航 #

快速生成动态类LeftCategoryNav

![1090399-20190901163916041-1232970249.png][]

把获取接口数据的方法移动到 左侧导航内

![1090399-20190901163951773-1993959739.png][]

解析json的时候

![1090399-20190901164033045-878502643.png][]

修改后

![1090399-20190901164100987-506069451.png][]

主要是因为我们生成的实体类里面也包含了 code、message、data这些。所以直接把data这个json对象转换成实体类CategoryModel就可以了。

![1090399-20190901164128404-1427076499.png][]

声明一个变量List。因为我们是动态的widget所以需要用setState去赋值

![1090399-20190901164203271-2091268650.png][]

这样我们就把我们的list数据准备好了

# 布置页面 #

![1090399-20190901164243975-2090240412.png][]

再定义一个内部的方法 返回InkWell部件

![1090399-20190901164321027-975088075.png][]

设置高度我们需要用到ScreenUtil的widget。从index\_page里面把相关的引用复制过来。

import 'package:flutter_screenutil/flutter_screenutil.dart';

![1090399-20190901164416363-1705624933.png][]

![1090399-20190901164445519-682142717.png][]

# 写LeftCategoryNav的build代码 #

写build代码。用listView外层再套一个container，因为要右边有一个边

![1090399-20190901164527611-3748665.png][]

![1090399-20190901164608349-1896995423.png][]

![1090399-20190901164617753-832761874.png][]

# 写主页面的build #

![1090399-20190901164644628-2024998272.png][]

# 效果展示 #

![1090399-20190901164717110-1834554184.png][]

![1090399-20190901164743684-1678462057.png][]

![1090399-20190901164803894-2064142708.png][]

# 最终代码 #

import 'package:flutter/material.dart';
    import '../service/service_method.dart';
    import 'dart:convert';
    import '../model/category.dart';
    import 'package:flutter_screenutil/flutter_screenutil.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()
              ],
            ),
          ),
        );
      }
    
     
    }
    
    //左侧大类导航
    class LeftCategoryNav extends StatefulWidget {
      @override
      _LeftCategoryNavState createState() => _LeftCategoryNavState();
    }
    
    class _LeftCategoryNavState extends State<LeftCategoryNav> {
      List list=[];
      @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){
        return InkWell(
          onTap: (){},
          child: Container(
            height: ScreenUtil().setHeight(100),
            padding: EdgeInsets.only(left:10.0,top:10.0),
            decoration: BoxDecoration(
              color: 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; 
          });
          //list.data.forEach((item)=>print(item.mallCategoryName));
        });
      }
    }

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

[1090399-20190901163517414-71821326.png]: /images/20230601/ab0c798dcfd741ebb4669beb6014806a.png
[https_javiercbk.github.io_json_to_dart]: https://javiercbk.github.io/json_to_dart/
[1090399-20190901163602673-1916230587.png]: /images/20230601/ee2d034d3c17476a9e8f110ef10bcc31.png
[1090399-20190901163804316-974363437.png]: /images/20230601/9624eeab09f640ce8f1bafa47be08f71.png
[1090399-20190901163832062-242022036.png]: /images/20230601/efab25c888b843fd909a5f998c4c02f0.png
[1090399-20190901163916041-1232970249.png]: /images/20230601/e1e7c915710946249b8afbc9dbf89cbc.png
[1090399-20190901163951773-1993959739.png]: /images/20230601/68dd5a1f43834c2ba5249ca3c2ab4e3b.png
[1090399-20190901164033045-878502643.png]: /images/20230601/d32992246c8743f081446d443d691867.png
[1090399-20190901164100987-506069451.png]: /images/20230601/1a186cd35adf4edeb5eea63325049866.png
[1090399-20190901164128404-1427076499.png]: /images/20230601/ce06547bfa1a40098410dff2e247cdbb.png
[1090399-20190901164203271-2091268650.png]: /images/20230601/dc325c383acb4842a03484786ba2c875.png
[1090399-20190901164243975-2090240412.png]: /images/20230601/eaa33d26646b4f5190d01159387b198f.png
[1090399-20190901164321027-975088075.png]: /images/20230601/fa04d28a646b4eb48dcb9e089c19c0a9.png
[1090399-20190901164416363-1705624933.png]: /images/20230601/8f02f69783244a5f93f781395026d731.png
[1090399-20190901164445519-682142717.png]: /images/20230601/62923182f10e46179513888e4fb338e9.png
[1090399-20190901164527611-3748665.png]: /images/20230601/05beba581a264fcba9e9e1fe092f89c4.png
[1090399-20190901164608349-1896995423.png]: /images/20230601/4598f48453934e7694527cadaf3c8bcb.png
[1090399-20190901164617753-832761874.png]: /images/20230601/37e7ab6cc8b5458dbd2c4ae640307335.png
[1090399-20190901164644628-2024998272.png]: /images/20230601/c1e1befe272e4032ad3fcff0b1fe17f4.png
[1090399-20190901164717110-1834554184.png]: /images/20230601/84a1e77eebe348bc84ed959c110f90f4.png
[1090399-20190901164743684-1678462057.png]: /images/20230601/6642f21b199842d3a12e2a2edf5a7d7e.png
[1090399-20190901164803894-2064142708.png]: /images/20230601/bf138aa4592a4646a54e3df9dcbf08a1.png