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 > 0) { return Container( child: AspectRatio( aspectRatio: 2 / 1, 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(46), margin: EdgeInsets.only(left: ScreenAdaper.width(20)), padding: EdgeInsets.only(left: ScreenAdaper.width(20)), decoration: BoxDecoration( border: Border( left: BorderSide( color: Colors.red, width: ScreenAdaper.width(10)))), child: Text(value, style: TextStyle(color: Colors.black54)), ); } //热门商品： Widget _hotProductListWidget() { if (this._hotProductList.length > 0) { return Container( height: ScreenAdaper.height(240), padding: EdgeInsets.all(ScreenAdaper.width(20)), // 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(140), width: ScreenAdaper.width(140), margin: EdgeInsets.only(right: ScreenAdaper.width(21)), child: Image.network("${sPic}", fit: BoxFit.cover), ), Container( padding: EdgeInsets.only(top: ScreenAdaper.height(10)), height: ScreenAdaper.height(44), child: Text( '${this._hotProductList[index].price}', style: TextStyle(color: Colors.red), ), ) ], ); }, itemCount: this._hotProductList.length, ), ); } else { return Text('暂无热门推荐数据'); } } Widget _recProductListWidget() { var itemWidth = (ScreenAdaper.getScreenWidth() - 30) / 2; return Container( padding: EdgeInsets.all(10), child: Wrap( runSpacing: 10, spacing: 10, children: this._bestProductList.map((value) { //图片： var sPic = value.sPic; sPic = Config.domain + sPic.replaceAll('\\', '/'); return Container( padding: EdgeInsets.all(ScreenAdaper.width(20)), width: itemWidth, decoration: BoxDecoration( border: Border.all(color: Colors.black12, width: 1)), child: Column( children: <Widget>[ Container( width: double.infinity, child: AspectRatio( aspectRatio: 1 / 1, child: Image.network("${sPic}", fit: BoxFit.cover), ), ), Padding( padding: EdgeInsets.only(top: ScreenAdaper.height(10)), child: Text( "${value.title}", maxLines: 2, overflow: TextOverflow.ellipsis, style: TextStyle(color: Colors.black54), ), ), Padding( padding: EdgeInsets.only(top: ScreenAdaper.height(20)), child: Stack( children: <Widget>[ Align( alignment: Alignment.centerLeft, child: Text( "${value.price}", style: TextStyle(color: Colors.red, fontSize: 16), ), ), Align( alignment: Alignment.centerRight, child: Text( "￥${value.oldPrice}", style: TextStyle( color: Colors.black54, fontSize: 16, decoration: TextDecoration.lineThrough), ), ) ], ), ) ], ), ); }).toList(), ), ); } @override Widget build(BuildContext context) { ScreenAdaper.init(context); return ListView( children: <Widget>[ _swiperWidget(), SizedBox(height: ScreenAdaper.height(20)), _titleWidget("猜你喜欢"), _hotProductListWidget(), SizedBox(height: ScreenAdaper.height(20)), _titleWidget("热门推荐"), _recProductListWidget() ], ); } }
增加依赖：
dio: ^2.1.10
