Flutter-防京东商城项目-编写详情页面商品通过接口获取数据-21

已于 2024-03-07 10:42:03 修改
阅读量199 收藏
点赞数
分类专栏： Flutter 文章标签： flutter
于 2021-09-04 20:07:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38716347/article/details/120104744
版权

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果
请添加图片描述

本章目标：
1.获取网络数据，赋值到第一个视图里面

商品详情获取回来的网络数据

{"result":{"_id":"5a0425bc010e711234661439","title":"磨砂牛皮男休闲鞋-有属性","cid":"5a042480010e711234661436","price":"688","old_price":"368","is_best":1,"is_hot":"1","is_new":"1","attr":[{"cate":"鞋面材料","list":["牛皮 "]},{"cate":"闭合方式","list":["系带"]},{"cate":"颜色","list":["红色","白色","黄色"]}],"status":1,"pic":"public\\upload\\RinsvExKu7Ed-ocs_7W1DxYO.png","content":"<p style=\"margin: 1.12em 0px; padding: 0px; text-align: center; line-height: 1.4; color: rgb(64, 64, 64); font-family: tahoma, arial, 宋体, sans-serif; font-size: 14px;\"><strong>非凡舒适,经久耐穿,融入飞翔元素,让你无论身处何处,都备受瞩目</strong><br /><br /><img alt=\"\" src=\"https://img30.360buyimg.com/popWaterMark/jfs/t7390/58/3849479320/166969/b8c17cad/59fabd2fNcd1ed823.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: middle;\" /></p><p style=\"margin: 1.12em 0px; padding: 0px; text-align: center; line-height: 1.4; color: rgb(64, 64, 64); font-family: tahoma, arial, 宋体, sans-serif; font-size: 14px;\"><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img30.360buyimg.com/imgzone/jfs/t10504/182/2465321261/89642/619c161b/59f831b8Nb84a4b96.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img14.360buyimg.com/imgzone/jfs/t9772/268/2466805940/61723/34d37efb/59f831cdNded68405.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img14.360buyimg.com/imgzone/jfs/t9775/81/2512315198/70050/331ea0d4/59f831cdN3c6df0aa.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img14.360buyimg.com/imgzone/jfs/t11653/222/774240663/68769/d8e9ff98/59f831ceN35a4273f.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img12.360buyimg.com/imgzone/jfs/t10636/218/2491518591/68633/ac6c5b05/59f831caN262904b1.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img14.360buyimg.com/imgzone/jfs/t10732/210/2485945643/66258/7276a664/59f831caNd20e2b4a.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /></p><img class=\"desc_anchor img-ks-lazyload\" id=\"desc-module-2\" alt=\"\" src=\"https://img10.360buyimg.com/imgzone/jfs/t11101/10/781218477/43/9acceab1/59f831aaN8687189b.gif\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; text-align: center; height: 1px; display: block; clear: both; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; color: rgb(64, 64, 64); font-family: tahoma, arial, 宋体, sans-serif; font-size: 14px; line-height: 21px;\" /><p style=\"margin: 1.12em 0px; padding: 0px; text-align: center; line-height: 1.4; color: rgb(64, 64, 64); font-family: tahoma, arial, 宋体, sans-serif; font-size: 14px;\"><br /></p><p style=\"margin: 1.12em 0px; padding: 0px; text-align: center; line-height: 1.4; color: rgb(64, 64, 64); font-family: tahoma, arial, 宋体, sans-serif; font-size: 14px;\"><img class=\"img-ks-lazyload\" alt=\"\" src=\"https://img10.360buyimg.com/imgzone/jfs/t10399/103/2508090813/543802/dcc5fa46/59f831d4N87a2bc5d.jpg\" style=\"margin: 0px; padding: 0px; border: 0px; vertical-align: top; animation: ks-fadeIn 350ms linear 0ms 1 normal both; opacity: 1; float: none;\" align=\"absmiddle\" /></p>","cname":"男鞋","sub_title":"非凡舒适,经久耐穿,融入飞翔元素,让你无论身处何处,都备受瞩目","salecount":275}}

1.编写数据模型

在这里插入图片描述


class ProductContentModel {
  ProductContentitem result;

  ProductContentModel({this.result});

  ProductContentModel.fromJson(Map<String, dynamic> json) {
    result =
    json['result'] != null ? new ProductContentitem.fromJson(json['result']) : null;
  }
  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.result != null) {
      data['result'] = this.result.toJson();
    }
    return data;
  }
}

class ProductContentitem {

  String sId;
  String title;
  String cid;
  Object price;
  Object oldPrice;
  Object isBest;
  Object isHot;
  Object isNew;
  Object status;
  Object pic;
  String content;
  String cname;
  List<Attr> attr;
  String subTitle;
  Object salecount;

  ProductContentitem(
      {this.sId,
        this.title,
        this.cid,
        this.price,
        this.oldPrice,
        this.isBest,
        this.isHot,
        this.isNew,
        this.status,
        this.pic,
        this.content,
        this.cname,
        this.attr,
        this.subTitle,
        this.salecount});

  ProductContentitem.fromJson(Map<String, dynamic> json) {
    sId = json['_id'];
    title = json['title'];
    cid = json['cid'];
    price = json['price'];
    oldPrice = json['old_price'];
    isBest = json['is_best'];
    isHot = json['is_hot'];
    isNew = json['is_new'];
    status = json['status'];
    pic = json['pic'];
    content = json['content'];
    cname = json['cname'];
    if (json['attr'] != null) {
      attr = new List<Attr>();
      json['attr'].forEach((v) {
        attr.add(new Attr.fromJson(v));
      });
    }
    subTitle = json['sub_title'];
    salecount = json['salecount'];
  }

  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['is_best'] = this.isBest;
    data['is_hot'] = this.isHot;
    data['is_new'] = this.isNew;
    data['status'] = this.status;
    data['pic'] = this.pic;
    data['content'] = this.content;
    data['cname'] = this.cname;
    if (this.attr != null) {
      data['attr'] = this.attr.map((v) => v.toJson()).toList();
    }
    data['sub_title'] = this.subTitle;
    data['salecount'] = this.salecount;
    return data;
  }
}

class Attr {
  String cate;
  List<String> list;

  Attr({this.cate, this.list});

  Attr.fromJson(Map<String, dynamic> json) {
    cate = json['cate'];
    list = json['list'].cast<String>();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['cate'] = this.cate;
    data['list'] = this.list;
    return data;
  }
}

2.回到详情商品页 ProductContent

导入头文件

import '../config/Config.dart';
import 'package:dio/dio.dart';
import '../model/ProductContentModel.dart';
import '../widget/LoadingWidget.dart';

写到详情页的主控制器里面

List _productContentList=[];

@override
void initState() {
  // TODO: implement initState
  super.initState();
  this._getContentData();
}

_getContentData() async{
  var api ='${Config.domain}api/pcontent?id=${widget.arguments['id']}';
  print(api);
  var result = await Dio().get(api);
  var productContent = new ProductContentModel.fromJson(result.data);
  setState(() {
    this._productContentList.add(productContent.result);
  });
}

3.修改下面的代码

3.2.判断获取回来有数据才把数据传递进去2.把获取回来的数据传递到商品控件里面

在这里插入图片描述

body: this._productContentList.length>0?Stack(
  children: <Widget>[
    TabBarView(
        children: <Widget>[
          ProductContentFirst(this._productContentList),
          ProductContentSecond(this._productContentList),
          ProductContentThird()
        ],
     ),
     Positioned(
       width: ScreenAdapter.width(750),
       height: ScreenAdapter.width(88),
):LoadingWidget(),

3.3.回到详情页编写接收数据的变量

在这里插入图片描述
导入

import '../../config/Config.dart';

class ProductContentSecond extends StatefulWidget {
  final List _productContentList;
  ProductContentSecond(this._productContentList,{Key key}) : super(key: key);
  _ProductContentSecondState createState() => _ProductContentSecondState();
}

3.4.回到商品页编写接收数据的变量

在这里插入图片描述
ProductContentFirst文件中导入

import '../../model/ProductContentModel.dart';
import '../../config/Config.dart';


class ProductContentFirst extends StatefulWidget {
  final List _productContentList;//--------------------------------
  ProductContentFirst(this._productContentList, {Key key}) : super(key: key);//--------------------------------
  _ProductContentFirstState createState() => _ProductContentFirstState();
}

class _ProductContentFirstState extends State<ProductContentFirst> {
  ProductContentitem _productContent;//--------------------------------

  @override
  void initState() {
    super.initState();
    this._productContent = widget._productContentList[0];
  }

3.5.动态给商品页的属性赋值

在这里插入图片描述
在这里插入图片描述

@override
Widget build(BuildContext context) {
//--------------------------------------------
  //处理图片
  String pic = Config.domain + this._productContent.pic;
  pic = pic.replaceAll('\\', '/');
//--------------------------------------------
  return Container(

child: ListView(
  children: <Widget>[
    AspectRatio(
      aspectRatio: 16 / 12,
      //--------------------------------------------
      child: Image.network("${pic}", fit: BoxFit.cover),
      //--------------------------------------------
    ),
    //标题
    Container(
      padding: EdgeInsets.only(top: 10),
      child: Text
      //--------------------------------------------
		("${this._productContent.title}",
		//--------------------------------------------
          style: TextStyle(
              color: Colors.black87, fontSize: ScreenAdapter.size(36))),
    ),
    Container(
        padding: EdgeInsets.only(top: 10),
        child: Text(
        //--------------------------------------------
        "${this._productContent.subTitle}",
        //--------------------------------------------
            style: TextStyle(
                color: Colors.black54,
                fontSize: ScreenAdapter.size(28)))),
    //价格
children: <Widget>[
  Text("特价: "),
  //--------------------------------------------
  Text("¥${this._productContent.price}",
  //--------------------------------------------
children: <Widget>[
  Text("原价: "),
  //--------------------------------------------
  Text("¥${this._productContent.oldPrice}",
  //--------------------------------------------

3.6.为底部弹框赋值

3.6.0先删除代码

代码在 _attrBottomSheet 封装里面 搜索 mainAxisAlignment: MainAxisAlignment.center,
在这里插入图片描述

创建数组

List _attr = [];

3.6.1为数组赋值

写在 _ProductContentFirstState 里面
在这里插入图片描述

this._attr = this._productContent.attr;

3.6.2封装两个方法

List<Widget> _getAttrItemWidget(attrItem) {
  List<Widget> attrItemList = [];
  attrItem.list.forEach((item) {
    attrItemList.add(Container(
      margin: EdgeInsets.all(10),
      child: Chip(
        label: Text("${item}"),
        padding: EdgeInsets.all(10),
      ),
    ));
  });
  return attrItemList;
}

//封装一个组件 渲染attr
List<Widget> _getAttrWidget() {
  List<Widget> attrList = [];
  this._attr.forEach((attrItem) {
    attrList.add(Wrap(
      children: <Widget>[
        Container(
          width: ScreenAdapter.width(120),
          child: Padding(
            padding: EdgeInsets.only(top: ScreenAdapter.height(22)),
            child: Text("${attrItem.cate}: ",
                style: TextStyle(fontWeight: FontWeight.bold)),
          ),
        ),
        Container(
          width: ScreenAdapter.width(590),
          child: Wrap(
            children: _getAttrItemWidget(attrItem),
          ),
        )
      ],
    ));
  });

  return attrList;
}

3.6.3在底部弹出框调用上面封装的方法。

在这里插入图片描述

padding: EdgeInsets.all(ScreenAdapter.width(20)),
child: ListView(
  children: <Widget>[
    Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: _getAttrWidget()
   )
冯汉栩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter项目——静态页面布局4详情页
m0_48132830的博客
11-22 665
详情页布局
Flutter-防京东商城项目-签名验证原理、签名验证算法-40
weixin_38716347的博客
09-07 256
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.安装第三方库 #md5加密 crypto: ^2.1.1 2.把文件拖进来 ...
用Flutter实现详情页、介绍页
weixin_40763897的博客
09-05 3178
1.效果图： 2.分析布局 布局建议通过以下方式来分析： 找出行和列 布局包含网格吗? 有重叠的元素吗? 是否需要选项卡? 注意需要对齐、填充和边框的区域 本例的如下图的分析，可知：四个元素排列成一列：一个图像，两个行和一个文本块。 标题部分有三个子项：一列文字，一个星形图标和一个数字。它的第一个子项，列，包含2行文字。 第一列占用大量空间，所以它必须包装在Expanded widget中。 下面的按钮部分也有3个子项：每个子项都是一个包含图标和文本的列： 3.实现布局 为了简化实现，可以采用逐个
flutter详细内容页开源
iCloudEnd的博客
02-14 222
源码 import 'package:flutter/material.dart'; // Uncomment lines 7 and 10 to view the visual layout at runtime. // import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;...
Flutter-防京东商城项目-商品详情属性选择-22
weixin_38716347的博客
09-04 218
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.安装第三方 flutter_inappbrowser: ^1.2.1 2.引入 import 'package:flutter_inappbrowser/flutter_inappbrowser.dart'; 3.接收参数 class ProductContentSec
Flutter防京东商城源码(21-30)
01-19
【Flutter防京东商城源码(21-30)】是一个关于使用Flutter开发的移动应用项目，主要目标是实现一个类似京东商城的电子商务平台。这个项目涵盖了从第21到第30个功能模块的代码，旨在帮助开发者深入理解如何用Flutter...
21 Flutter仿京东商城项目 商品详情 请求接口渲染数据 商品属性数据渲染.zip
03-25
在本项目中，我们主要探讨的是如何使用Flutter框架来构建一个仿京东商城的商品详情页面，以及如何通过请求接口获取并渲染商品数据，特别是商品属性数据的处理。Flutter是一款由Google开发的开源UI工具包，用于构建高...
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
Flutter防京东商城源码(1-10)
01-19
【Flutter防京东商城源码(1-10)】是一个基于Flutter框架开发的电商应用项目，旨在模拟京东商城的功能和界面设计。这个源码集合包含了从基础架构到具体功能实现的多个部分，覆盖了10个不同的阶段或模块，帮助开发者...
Flutter防京东商城源码(31-46)
01-19
在防京东商城项目中，这些库将用于获取商品列表、用户信息、订单数据等。 4. **数据持久化**：可能使用sqflite库来存储用户数据，如登录信息、购物车内容，确保数据在应用关闭后仍能保留。 5. **动画**：Flutter的...
仿淘宝商品详情页标题渐变
07-12
简易仿淘宝商品详情页面标题渐变的demo，可以做适当修改
Flutter淘宝App支持iOSAndroid
08-10
Flutter淘宝App，支持iOS、Android
Flutter项目实战之女装商城------后台接口环境搭建
webor2006的博客
09-22 457
继续Flutter商城项目的编写，这次准备用Node来搭建后来模拟一种真实的get和post请求，当然对于Node这里仅限能将它跑起来能为咱们的Flutter前端所使用既可，关于Node这块我也是白痴一个，不过这块领域的知识之后有想法系统的学习一下，之后再说，先进入正题。 Node安装： 关于这块就不过多说明了，上官网下载安装装去安装： 由于我本地已经好早之前安装过了，这里就不装最新版本了，安装成功之后查看一下node的版本： 这样就代表node环境已经安装好了，没啥好说的。 创建工程：.
Flutter 利用 Hero 动效实现列表详情页的无缝切换
Flutter 跨平台技术研究
06-05 451
利用 Hero 动画实现列表到详情页无缝切换，纵享丝滑，用户体验更好。
Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试
会煮咖啡的猫咪
07-10 699
B站视频 https://www.bilibili.com/video/BV18e411s7A1 https://www.bilibili.com/video/BV1RZ4y1W7CN 本节目标 详情页技术方案比较 载入 web 内容 自动计算高度 清除广告、推荐 拦截请求 loading 状态显示 分享插件 远程 android 设备调试 详情展示 技术方案选择 分析工具 UI automator view 文件位置 /Users/ducafecat/Library/Android/sdk/to.
Flutter实现京东淘宝电商商品详情页效果
小鸡仔hana的博客
07-15 2123
之前开发电商的功能时，需要做商品界面，UI基本是参考京东、淘宝的效果，以前android原生开发的时候觉得很好做，切到Flutter之后只能自己想办法，所以自己后来做出了这样的效果，分享下实现方案。 先看效果图吧 效果图比较 这是京东的效果 下图是我做的效果，基本和京东的保持一致，点击tab可快速切换到某一页，滑动列表tab自动切换。 思路 仔细查看京东的商品详情页，可以整理出几点 tabbar随着慢慢滑动一定距离会变透明，再次滑到顶部则重新变成不透明 滑动的过程中，到达新的页面内容，顶部的tab下标
Flutter-防京东商城项目-编写详情页添加购物车-27
weixin_38716347的博客
09-05 132
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.复制一个一模一样的控件下来 CartNum源码 import 'package:flutter/material.dart'; import 'package:flutter_app/services/screenAdaper.dart'; import 'package:
Flutter系列（十一）实现商城首页和商品详情页
摸金校尉的博客
06-23 2366
本文用flutter实现商城首页和商品详情页
flutter网络请求和详情页展示的例子
大鱼化蝶的传说
07-05 3564
总结demo，主要操作如下： 1.使用http 包进行网络请求 2.转换json数据为List&lt;Photo&gt; 3.使用GridView显示缩略图片 4.为缩略图添加onTap，第二屏查看大图 import 'dart:async'; import 'dart:convert'; import 'package:flutter/foundation.dart'; impor...
flutter使用Dio库并通过localhost和Content-Type获取后端数据
最新发布
07-23
要在Flutter中使用Dio库并通过localhost和Content-Type获取后端数据，你可以按照以下步骤操作： 1. 首先，确保你的Flutter项目已经集成了Dio库。你可以在`pubspec.yaml`文件中添加依赖项： ```yaml dependencies: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冯汉栩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值