05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品

时间:2023-03-10 05:52:21
05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品

05-06 Flutter JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染:Flutter创建商品数据模型 、请求Api接口渲染热门商品 推荐商品

Config.dart

class Config{
static String domain='http://jd.itying.com/';
}

  FocusModel.dart

class FocusModel {
List<FocusItemModel> result; FocusModel({this.result}); FocusModel.fromJson(Map<String, dynamic> json) {
if (json['result'] != null) {
result = new List<FocusItemModel>();
json['result'].forEach((v) {
result.add(new FocusItemModel.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 FocusItemModel {
String sId;
String title;
String status;
String pic;
String url; FocusItemModel({this.sId, this.title, this.status, this.pic, this.url}); FocusItemModel.fromJson(Map<String, dynamic> json) {
sId = json['_id'];
title = json['title'];
status = json['status'];
pic = json['pic'];
url = json['url'];
} 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['url'] = this.url;
return data;
}
}

  ProductModel.dart

class ProductModel {
List<ProductItemModel> result; ProductModel({this.result}); ProductModel.fromJson(Map<String, dynamic> json) {
if (json['result'] != null) {
result = new List<ProductItemModel>();
json['result'].forEach((v) {
result.add(new ProductItemModel.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 ProductItemModel {
String sId;
String title;
String cid;
Object price;
String oldPrice;
String pic;
String sPic; ProductItemModel(
{this.sId,
this.title,
this.cid,
this.price,
this.oldPrice,
this.pic,
this.sPic}); ProductItemModel.fromJson(Map<String, dynamic> json) {
sId = json['_id'];
title = json['title'];
cid = json['cid'];
price = json['price'];
oldPrice = json['old_price'];
pic = json['pic'];
sPic = json['s_pic'];
} Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['_id'] = this.sId;
data['title'] = this.title;
data['cid'] = this.cid;
data['price'] = this.price;
data['old_price'] = this.oldPrice;
data['pic'] = this.pic;
data['s_pic'] = this.sPic;
return data;
}
}

  Home.dart

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import '../../services/ScreenAdaper.dart'; // import 'dart:convert';
import '../../config/Config.dart';
import 'package:dio/dio.dart'; //轮播图类模型:
import '../../model/FocusModel.dart'; //热门推荐:
import '../../model/ProductModel.dart'; class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
//轮播图:
//flutter run -d all 链接多个设备的命令:
List _focusData = [];
List _hotProductList = [];
List _bestProductList = [];
void initState() {
super.initState();
_getFocusData();
_getHotProductData();
_getBestProductData();
} //获取轮播图数据:
_getFocusData() async {
var api = '${Config.domain}/api/focus';
var result = await Dio().get(api);
var focusList = FocusModel.fromJson(result.data);
focusList.result.forEach((value) {
print(value.title);
print(value.pic);
});
setState(() {
this._focusData = focusList.result;
});
} //获取猜你喜欢的数据:
_getHotProductData() async {
var api = '${Config.domain}api/plist?is_hot=1';
var result = await Dio().get(api);
var hotProductList = ProductModel.fromJson(result.data);
setState(() {
this._hotProductList = hotProductList.result;
});
} //获取热门推荐的数据:
_getBestProductData() async {
var api = '${Config.domain}api/plist?is_best=1';
var result = await Dio().get(api);
var bestProductList = ProductModel.fromJson(result.data);
setState(() {
this._bestProductList = bestProductList.result;
});
} Widget _swiperWidget() {
// List<Map> imgList = [
// {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
// {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
// ];
if (this._focusData.length > ) {
return Container(
child: AspectRatio(
aspectRatio: / ,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
String pic = this._focusData[index].pic;
pic = Config.domain + pic.replaceAll('\\', '/');
return new Image.network(
"${pic}",
fit: BoxFit.fill,
);
},
itemCount: this._focusData.length,
pagination: new SwiperPagination(),
control: new SwiperControl(),
autoplay: true,
),
),
);
} else {
return Text('加载中~');
}
} //标题:
Widget _titleWidget(value) {
return Container(
height: ScreenAdaper.height(),
margin: EdgeInsets.only(left: ScreenAdaper.width()),
padding: EdgeInsets.only(left: ScreenAdaper.width()),
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.red, width: ScreenAdaper.width()))),
child: Text(value, style: TextStyle(color: Colors.black54)),
);
} //热门商品:
Widget _hotProductListWidget() {
if (this._hotProductList.length > ) {
return Container(
height: ScreenAdaper.height(),
padding: EdgeInsets.all(ScreenAdaper.width()),
// width: double.infinity, //寬度自適應
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (contxt, index) {
String sPic = this._hotProductList[index].sPic;
sPic = Config.domain + sPic.replaceAll('\\', '/');
return Column(
children: <Widget>[
Container(
height: ScreenAdaper.height(),
width: ScreenAdaper.width(),
margin: EdgeInsets.only(right: ScreenAdaper.width()),
child: Image.network("${sPic}", fit: BoxFit.cover),
),
Container(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
height: ScreenAdaper.height(),
child: Text(
'${this._hotProductList[index].price}',
style: TextStyle(color: Colors.red),
),
)
],
);
},
itemCount: this._hotProductList.length,
),
);
} else {
return Text('暂无热门推荐数据');
}
} Widget _recProductListWidget() {
var itemWidth = (ScreenAdaper.getScreenWidth() - ) / ;
return Container(
padding: EdgeInsets.all(),
child: Wrap(
runSpacing: ,
spacing: ,
children: this._bestProductList.map((value) {
//图片:
var sPic = value.sPic;
sPic = Config.domain + sPic.replaceAll('\\', '/'); return Container(
padding: EdgeInsets.all(ScreenAdaper.width()),
width: itemWidth,
decoration: BoxDecoration(
border: Border.all(color: Colors.black12, width: )),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
child: AspectRatio(
aspectRatio: / ,
child: Image.network("${sPic}", fit: BoxFit.cover),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Text(
"${value.title}",
maxLines: ,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black54),
),
),
Padding(
padding: EdgeInsets.only(top: ScreenAdaper.height()),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"${value.price}",
style: TextStyle(color: Colors.red, fontSize: ),
),
),
Align(
alignment: Alignment.centerRight,
child: Text(
"¥${value.oldPrice}",
style: TextStyle(
color: Colors.black54,
fontSize: ,
decoration: TextDecoration.lineThrough),
),
)
],
),
)
],
),
);
}).toList(),
),
);
} @override
Widget build(BuildContext context) {
ScreenAdaper.init(context);
return ListView(
children: <Widget>[
_swiperWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("猜你喜欢"),
_hotProductListWidget(),
SizedBox(height: ScreenAdaper.height()),
_titleWidget("热门推荐"),
_recProductListWidget()
],
);
}
}

增加依赖:

dio: ^2.1.10