Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建
42.详细页_UI主页面架构搭建
详细分成六大部分拆分开
body里面用FutureBuilder异步加载。
FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future
把我们的方法修改为返回的类型为Future。我们直接返回的是一个字符串。因为我们里面使用了provide,所以其实这里我们随便返回个字符串就没那么重要 了。
我们在页面上默认放上一个Text的widget显示传过来的id
运行页面:
点击左上角的返回可以返回到上一页
最终代码:
- import 'package:flutter/material.dart';
- import 'package:provide/provide.dart';
- import '../provide/details_info.dart';
- class DetailsPage extends StatelessWidget {
- final String goodsId;
- DetailsPage(this.goodsId);//flutter 1.2的最新的写法 构造函数
- @override
- 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){
- //如果有数据返回一个Container
- return Container(
- child: Column(
- children: <Widget>[
- Text('商品ID:${goodsId}')
- ],
- ),
- );
- }else{
- return Text('加载中......');//没有数据的情况
- }
- },
- ),
- );
- }
- Future _getBackInfo(BuildContext context) async{
- await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
- //print('加载完成...........');
- return '完成加载';
- }
- }
Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建的更多相关文章
- Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用
47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...
- Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页
43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...
- Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写
44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...
- Flutter实战视频-移动电商-45.详细页_说明区域UI编写
45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...
- Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget
46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...
- Flutter实战视频-移动电商-48.详细页_详情和评论的切换
48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...
- Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏
49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...
- Flutter实战视频-移动电商-41.详细页_数据接口的调试
41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...
- Flutter移动电商实战 --(42)详细页_UI主页面架构搭建
详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future 把我们的方法修改为返回的类型为F ...
随机推荐
- 抽象类的子类能够new
纠结了半天,我以为继承了Activity后不能new这里被那个onCreate方法迷惑了以为会出现故障一直没直接创建对象类使用 后来试了试才知道 activity似乎是一个抽象类吧. 你要用他的方法, ...
- Ipython基础功能
ipython:交互式的python命令行 直接在终端敲命令即可进入 安装:pip install ipython 使用:在终端敲“ipython” 与python解释器的使用方法一致 TAB键自动补 ...
- cubietruck制作刷新lubuntu-kernel
一:安装交叉编译工具链以及相应的工具(系统最好是ubutnu-64位-server) sudo apt-get install g++ sudo apt-get install libncurses5 ...
- 网络协议之rtp---h264的rtp网络协议实现
完整的C/S架构的基于RTP/RTCP的H.264视频传输方案.此方案中,在服务器端和客户端分别进行了功能模块设计.服务器端:RTP封装模块主要是对H.264码流进行打包封装:RTCP分析模块负责产牛 ...
- vi 之行号操作---显示行号、跳到指定行
1.设置行号显示 esc ->:->set nu 2.跳到指定行 esc-> 123gg 3. 进入命令模式 ?一:在冒号下输入 vim vi 在命令模式中 使用 d(版本不同 使用 ...
- CF 445A(DZY Loves Chessboard-BW填充)
A. DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input stand ...
- 怎么理解RSA算法
原文地址:http://www.ittenyear.com/414/rsa/ 怎么理解RSA算法 能够把非对称加密算法里的公钥想象成一个带锁的箱子,把私钥想象成一把钥匙 能够把对称加密算法里的密钥想象 ...
- 开源G711(PCMA、PCMU)/G726转AAC项目EasyAACEncoder
EasyDarwin开源社区整理了一份G711(PCMA.PCMU)/G726转AAC的转码库,支持Windows/Linux跨平台使用,将安防标准的G711转成移动互联网常用的AAC格式,希望能给大 ...
- RTSP/RTMP/HLS/HTTP流媒体播放器EasyPlayer
EasyPlayer播放器系列项目 EasyPlayer是由EasyDarwin开源团队开发和维护的一个流媒体播放器系列项目,随着多年不断的发展和迭代,不断基于成功的实践经验,发展出包括有: Easy ...
- Delphi的RTTI(许多参考链接)
RTTI(RunTime Type Information): 运行时类型信息, 就是在程序运行后也能得到类型(譬如 TButton 类)的信息. 这在早期主要用于 IDE 设计时, 譬如把一个 Bu ...