Flutter移动电商实战 --(41)详细页_数据接口的调试

建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试

生成model类

json数据:

{
  "code": "0",
  "message": "success",
  "data": {
    "goodInfo": {
      "image5": "",
      "amount": 10000,
      "image3": "",
      "image4": "",
      "goodsId": "ed675dda49e0445fa769f3d8020ab5e9",
      "isOnline": "yes",
      "image1": "http://images.baixingliangfan.cn/shopGoodsImg/20190116/20190116162618_2924.jpg",
      "image2": "",
      "goodsSerialNumber": "6928804011173",
      "oriPrice": 3.00,
      "presentPrice": 2.70,
      "comPic": "http://images.baixingliangfan.cn/compressedPic/20190116162618_2924.jpg",
      "state": 1,
      "shopId": "402880e860166f3c0160167897d60002",
      "goodsName": "可口可乐500ml/瓶",
      "goodsDetail": "<img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081109_5060.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081109_1063.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_8029.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_1074.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_8439.jpg\" width=\"100%\" height=\"auto\" alt=\"\" /><img src=\"http://images.baixingliangfan.cn/shopGoodsDetailImg/20171224/20171224081110_6800.jpg\" width=\"100%\" height=\"auto\" alt=\"\" />"
    },
    "goodComments": [
      {
        "SCORE": 5,
        "comments": "果断卸载,2.5个小时才送到",
        "userName": "157******27",
        "discussTime": 1539491266336
      }
    ],
    "advertesPicture": {
      "PICTURE_ADDRESS": "http://images.baixingliangfan.cn/advertesPicture/20190113/20190113134955_5825.jpg",
      "TO_PLACE": "1"
    }
  }
}

json生成dart类的网址:

https://javiercbk.github.io/json_to_dart/

在models文件夹下面新建details.dart类,并把我们生成的类复制过来。

生成的类需要稍微修改一下,类名修改为DetailsGoodsModel

里面的Data数据修改为DatailsGoodsData

设置后台的URL

'getGoodDetailById':serviceUrl+'wxmini/getGoodDetailById',//商品详细信息

Provide

provide/新建details_info.dart

我们的业务逻辑要写在provide里面。

所以需要引入:../service/service_method.dart

引入四个必要的包,然后class类要混入,。ChangeNotifier

UI和业务逻辑分开,所以获取数据我们就写在Provide里面

后台获取数据的方法就写完了。

provide全局注入

在main.dart中注入

UI调用

新写一个方法,看看后台有没有数据,打印到控制台就可以了。

build方法内调用

运行测试

点击后报了一个错误

Unhandled Exception: type 'double' is not a subtype of type 'int'

修正错误

保存后,大R进行热加载,成功的返回了数据

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴为您解答问题!关于Flutter实战视频-移动电商-48.详细_详情和评论的切换,我可以提供以下解答: 在Flutter实战视频-移动电商-48中,详细的详情和评论的切换是通过一个TabBar实现的。具体来说,通过在AppBar中添加一个TabBar来实现不同面之间的切换。在这个TabBar中,我们可以添加两个Tab,分别为“详情”和“评论”,并分别对应两个面。当用户点击不同的Tab时,就可以切换到不同的面。 在Flutter中,TabBar可以使用DefaultTabController和TabBarView来实现。DefaultTabController是一个Widget,它可以管理TabBar和TabBarView之间的关系。TabBarView则是一个Widget,它可以显示不同的面。 具体实现方法如下: ```dart class DetailPage extends StatefulWidget { @override _DetailPageState createState() => _DetailPageState(); } class _DetailPageState extends State<DetailPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品详情'), bottom: TabBar( tabs: <Widget>[ Tab( text: '详情', ), Tab( text: '评论', ), ], ), ), body: DefaultTabController( length: 2, child: TabBarView( children: <Widget>[ // 详情面 DetailWidget(), // 评论面 CommentWidget(), ], ), ), ); } } ``` 在上面的代码中,我们首先创建了一个AppBar,并在其中添加了一个TabBar。然后,在Scaffold的body中,我们创建了一个DefaultTabController,并将其length设为2,即有两个面。最后,我们在TabBarView中添加了两个Widget,即DetailWidget和CommentWidget,分别对应详情面和评论面。 希望这个解答能够对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值