8c99df70f245798ec3126457cd1d8c0.png
https://javiercbk.github.io/json_to_dart/
这个链接可以由json格式自动生成model
大概看看就行
class CategoryModel {
String code;
String message;
List<Data> data;
CategoryModel({this.code, this.message, this.data});
CategoryModel.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;
}
}
这里使用类的形式建立一个动态菜单，所以用快捷键stful，快速建立了一个名字为LeftCategoryNav的StatefulWidget。并声明了一个List数据，起名就叫list。具体代码如下：
//左侧导航菜单
class LeftCategoryNav extends StatefulWidget {
_LeftCategoryNavState createState() => _LeftCategoryNavState();
}
class _LeftCategoryNavState extends State<LeftCategoryNav> {
List list=[];
@override
Widget build(BuildContext context) {
return Container();
}
}
大类子项（相当于oc的cell）
Widget _leftInkWel(int index){
return InkWell(
onTap: (){},
child: Container(
height: ScreenUtil().setHeight(100),
padding:EdgeInsets.only(left:10,top:20),
decoration: BoxDecoration(
color: Colors.white,
border:Border(
bottom:BorderSide(width: 1,color:Colors.black12)
)
),
child: Text(list[index].mallCategoryName,style: TextStyle(fontSize:ScreenUtil().setSp(28)),),
),
);
}
当子类别写好后，可以对build方法进行完善，build方法我们采用动态的ListView来写，代码如下：
@override
Widget build(BuildContext context) {
return Container(
width: ScreenUtil().setWidth(180),
decoration: BoxDecoration(
border: Border(
right: BorderSide(width: 1,color:Colors.black12)
)
),
child: ListView.builder(
itemCount:list.length,
itemBuilder: (context,index){
return _leftInkWel(index);
},
),
);
}
获取数据代码
void _getCategory()async{
await request('getCategory').then((val){
var data = json.decode(val.toString());
CategoryModel category = CategoryModel.fromJson(data);
setState(() {
list = category.data;
});
});
}
我们希望获取数据只在Widget初始化的时候进行，所以再重写一个initState方法。
@override
void initState() {
_getCategory();
super.initState();
}
全部代码
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_shop/service/service_method.dart';
import '../model/category.dart';
class CategoryPage extends StatefulWidget {
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('分类页面'),
),
body: Container(
child: Row(
children: <Widget>[
LeftCategoryNav()
],
),
)
);
}
}
//左侧分类列表
class LeftCategoryNav extends StatefulWidget {
LeftCategoryNavState createState() => new LeftCategoryNavState();
}
class LeftCategoryNavState extends State<LeftCategoryNav> {
List list = [];
@override
void initState() {
_getCategory();
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
width: ScreenUtil().setWidth(180),
decoration: BoxDecoration(
border: Border(
right: BorderSide(
width: 1,
color: Colors.black12
)
)
),
child: ListView.builder(
// itemCount: list.length,
itemCount: 20,
itemBuilder: (context, index) {
return _leftInWel(index);
}
),
);
}
Widget _leftInWel(int index){
return InkWell(
onTap: (){},
child: Container(
height: ScreenUtil().setHeight(100),
padding: EdgeInsets.only(left: 10,top: 20),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 1,
color: Colors.black12,
)
)
),
child: Text(
// list[index].mallCategoryName,
'分类名称',
style: TextStyle(
fontSize: ScreenUtil().setSp(28),
),
),
),
);
}
void _getCategory()async{
await request('getCategory').then((val){
var data = json.decode(val.toString());
CategoryModel category = CategoryModel.fromJson(data);
setState(() {
list = category.data;
});
});
}
}
网友评论