42.详细页_UI主页面架构搭建

详细分成六大部分拆分开

body里面用FutureBuilder异步加载。

FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future

把我们的方法修改为返回的类型为Future。我们直接返回的是一个字符串。因为我们里面使用了provide,所以其实这里我们随便返回个字符串就没那么重要 了。

我们在页面上默认放上一个Text的widget显示传过来的id

运行页面:

点击左上角的返回可以返回到上一页

最终代码:

  1. import 'package:flutter/material.dart';
  2. import 'package:provide/provide.dart';
  3. import '../provide/details_info.dart';
  4.  
  5. class DetailsPage extends StatelessWidget {
  6. final String goodsId;
  7.  
  8. DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数
  9.  
  10. @override
  11. Widget build(BuildContext context) {
  12.  
  13. return Scaffold(
  14. appBar: AppBar(
  15. leading: IconButton(
  16. icon: Icon(Icons.arrow_back),
  17. onPressed: (){
  18. Navigator.pop(context);//返回上一个页面
  19. },
  20. ),
  21. title: Text('商品详细页'),
  22. ),
  23. body: FutureBuilder(
  24. future: _getBackInfo(context),
  25. builder: (context,snapshot){
  26. //判断是否有数据
  27. if(snapshot.hasData){
  28. //如果有数据返回一个Container
  29. return Container(
  30. child: Column(
  31. children: <Widget>[
  32. Text('商品ID:${goodsId}')
  33. ],
  34. ),
  35. );
  36. }else{
  37. return Text('加载中......');//没有数据的情况
  38. }
  39. },
  40. ),
  41. );
  42. }
  43.  
  44. Future _getBackInfo(BuildContext context) async{
  45. await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
  46. //print('加载完成...........');
  47. return '完成加载';
  48. }
  49.  
  50. }

Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建的更多相关文章

  1. Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用

    47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...

  2. Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页

    43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...

  3. Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写

    44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...

  4. Flutter实战视频-移动电商-45.详细页_说明区域UI编写

    45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...

  5. Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget

    46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...

  6. Flutter实战视频-移动电商-48.详细页_详情和评论的切换

    48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...

  7. Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏

    49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...

  8. Flutter实战视频-移动电商-41.详细页_数据接口的调试

    41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...

  9. Flutter移动电商实战 --(42)详细页_UI主页面架构搭建

    详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future 把我们的方法修改为返回的类型为F ...

随机推荐

  1. 抽象类的子类能够new

    纠结了半天,我以为继承了Activity后不能new这里被那个onCreate方法迷惑了以为会出现故障一直没直接创建对象类使用 后来试了试才知道 activity似乎是一个抽象类吧. 你要用他的方法, ...

  2. Ipython基础功能

    ipython:交互式的python命令行 直接在终端敲命令即可进入 安装:pip install ipython 使用:在终端敲“ipython” 与python解释器的使用方法一致 TAB键自动补 ...

  3. cubietruck制作刷新lubuntu-kernel

    一:安装交叉编译工具链以及相应的工具(系统最好是ubutnu-64位-server) sudo apt-get install g++ sudo apt-get install libncurses5 ...

  4. 网络协议之rtp---h264的rtp网络协议实现

    完整的C/S架构的基于RTP/RTCP的H.264视频传输方案.此方案中,在服务器端和客户端分别进行了功能模块设计.服务器端:RTP封装模块主要是对H.264码流进行打包封装:RTCP分析模块负责产牛 ...

  5. vi 之行号操作---显示行号、跳到指定行

    1.设置行号显示 esc ->:->set nu 2.跳到指定行 esc-> 123gg 3. 进入命令模式 ?一:在冒号下输入 vim vi 在命令模式中 使用 d(版本不同 使用 ...

  6. CF 445A(DZY Loves Chessboard-BW填充)

    A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...

  7. 怎么理解RSA算法

    原文地址:http://www.ittenyear.com/414/rsa/ 怎么理解RSA算法 能够把非对称加密算法里的公钥想象成一个带锁的箱子,把私钥想象成一把钥匙 能够把对称加密算法里的密钥想象 ...

  8. 开源G711(PCMA、PCMU)/G726转AAC项目EasyAACEncoder

    EasyDarwin开源社区整理了一份G711(PCMA.PCMU)/G726转AAC的转码库,支持Windows/Linux跨平台使用,将安防标准的G711转成移动互联网常用的AAC格式,希望能给大 ...

  9. RTSP/RTMP/HLS/HTTP流媒体播放器EasyPlayer

    EasyPlayer播放器系列项目 EasyPlayer是由EasyDarwin开源团队开发和维护的一个流媒体播放器系列项目,随着多年不断的发展和迭代,不断基于成功的实践经验,发展出包括有: Easy ...

  10. Delphi的RTTI(许多参考链接)

    RTTI(RunTime Type Information): 运行时类型信息, 就是在程序运行后也能得到类型(譬如 TButton 类)的信息. 这在早期主要用于 IDE 设计时, 譬如把一个 Bu ...