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 ...
随机推荐
- Citrix_XenServer-6.1安装过程详解(转)
本次为使用VirtualBox虚拟机过安装测试机过程,我们在使用Vm(无论是Vbox还是VMware等)我们的CPU都必须可支持Intel-V或AMD-V,并且在VM软件设置和BIOS设置开启虚拟化支 ...
- 抽象类的子类能够new
纠结了半天,我以为继承了Activity后不能new这里被那个onCreate方法迷惑了以为会出现故障一直没直接创建对象类使用 后来试了试才知道 activity似乎是一个抽象类吧. 你要用他的方法, ...
- UVA1422-Processor(二分法+优先队列)
option=com_onlinejudge&Itemid=8&category=512&page=show_problem&problem=4168"> ...
- .NET MVC 4 实现用户注册功能
初学MVC,踩了不少坑,所以通过实现一个用户注册功能把近段时间学习到的知识梳理一遍,方便以后改进和查阅. 问题清单: l 为什么EF自动生成的表名后自动添加了s? l 如何为数据库初始化一些数据? l ...
- Java 语法清单
Java 语法清单 Java 语法清单翻译自 egek92 的 JavaCheatSheet,从属于笔者的 Java 入门与实践系列.时间仓促,笔者只是简单翻译了些标题与内容整理,支持原作者请前往 ...
- Effective Java - [2. 创建与销毁对象]
让对象的创建与销毁在掌控中. Item 1: 使用静态工厂方法而非使用构造函数 public static Boolean valueOf(boolean b) { return b ? Boolea ...
- Apache/2.4.9启动错误:AH01630: client denied by server configuration
在升级Yii框架1.11->2.0beta时,PHP升级到5.5.顺带升级Apache2.2.x到2.4.9. 把原有vhost配置移植过来,出现Apache启动错误: AH01630: cli ...
- Leetcode 002-Search Insert Position
#Given a sorted array and a target value, return the index if the target is found. If not, return th ...
- AAC包增加ADTS头Without MediaCodec
AAC原始码流无法直接播放,一般需要封装为ADTS格式才能再次使用,本博主在android中用MediaCodec编码得到的AAC就是raw格式,为了保存为.aac格式,需要增加adts头,这样就可以 ...
- CSS的两种盒模型
盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLI ...