页面写法逻辑
1、先建立模型
https://javiercbk.github.io/json_to_dart/
将json数据转化为dart
2、创建provide
import 'package:flutter/material.dart';
import '../model/details.dart';
import '../service/service_method.dart';
import 'dart:convert';
class DetailsInfoProvidewith ChangeNotifier {
//model
DetailsModelgoodsInfo =null;
// 从后台获取商品数据
getGoodsInfo(String id)async{
var formData = {'goodId': id};
await request('getGoodDetailById', formData: formData).then((value) {
// 将获得的数据转换为对象
var responseData=json.decode(value.toString());
// print(responseData);
// 将获得的数据转换为模型
goodsInfo=DetailsModel.fromJson(responseData);
// 通知监听者
notifyListeners();
});
}
3、全局注入 在main.dart中
var providers =Providers();
var detailsInfoProvide =DetailsInfoProvide();
// 将状态放入顶层
providers
..provide(Provider.value(counter))
..provide(Provider.value(childCategory))
..provide(Provider.value(categoryGoodsListProvide))
..provide(Provider.value(detailsInfoProvide));
4、在页面引入privide
//调用provide时需要context
void _getBackInfo(BuildContext context)async{
await Provide.value(context).getGoodsInfo(goodsId);
}
5、进行页面ui搭建
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
leading:IconButton(icon:Icon(Icons.arrow_back), onPressed: (){
Navigator.pop(context);
}),
title:Text('商品详情页'),
),
body:FutureBuilder(
future: _getBackInfo(context),
builder: (context, snapshot) {
// 是否返回值
if (snapshot.hasData) {
return Container(
child:Column(
children: [
Text(goodsId)
],
),
);
}else{
return Text("加载中。。。。");
}
}
),
);
}
//调用provide时需要context
Future _getBackInfo(BuildContext context)async{
await Provide.value(context).getGoodsInfo(goodsId);
return "完成加载";
}
6、新建与页面同名的文件夹进行拆分
//需要用到provide数据的
import 'package:flutter/material.dart';
import 'package:flutter_shop/config/font.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class DetailsTopAreaextends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide(
builder: (context,child,val){
var goodsInfo=Provide.value(context).goodsInfo.data.goodInfo;
if(goodsInfo!=null){
return Container(
color: Colors.white,
child:Column(
children: [
_goodsImage(goodsInfo.image1),
_goodsName(goodsInfo.goodsName),
_goodsNum(goodsInfo.goodsSerialNumber),
_goodsPrice(goodsInfo.presentPrice,goodsInfo.oriPrice)
],
),
);
}else{
return Text("正在加载中");
}
}
);
}
// 商品图片
Widget _goodsImage(url){
return Image.network(url,width:ScreenUtil().setWidth(740),);
}
// 商品名称
Widget _goodsName(name){
return Container(
width:ScreenUtil().setWidth(740),
padding:EdgeInsets.only(left:15.0),
child:Text(name,
style:TextStyle(
fontSize:ScreenUtil().setSp(30),
),
),
);
}
// 商品编号
Widget _goodsNum(num){
return Container(
width:ScreenUtil().setWidth(730),
padding:EdgeInsets.only(left:15.0),
margin:EdgeInsets.only(top:8.0),
child:Text('编号：${num}',style:TextStyle(
color: Colors.black45
),),
);
}
// 价格
Widget _goodsPrice(nowPrice,oriPrice){
return Container(
width:ScreenUtil().setWidth(730),
padding:EdgeInsets.only(left:15.0),
margin:EdgeInsets.only(top:8.0),
child:Row(
children: [
Text('￥${nowPrice}',style:TextStyle(
color: Colors.red
),),
Text('市场价￥${oriPrice}',style: KFont.oriPriceStyle),
],
)
);
}
}
//不需要用的provide数据的
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class DetailExplainextends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin:EdgeInsets.only(top:10, bottom:10),
color: Colors.white,
width:ScreenUtil().setWidth(750),
padding:EdgeInsets.only(top:10.0,left:15,bottom:10,right:15),
child:Text(
"说明：>极速送达>正品保证",
style:TextStyle(color: Colors.red, fontSize:ScreenUtil().setSp(30)),
),
);
}
}
