Flutter实战视频-移动电商-45.详细页_说明区域UI编写
45.详细页_说明区域UI编写
pages/details_page/details_expain.dart
详情页面引用组件
效果展示:
最终代码:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsExplain extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
margin: EdgeInsets.only(top:10.0),
width: ScreenUtil().setWidth(),
padding: EdgeInsets.all(10.0),
child: Text(
'说明: > 极速送达 > 正品保证',
style: TextStyle(
color: Colors.red,
fontSize: ScreenUtil().setSp()
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.dart';
import './details_page/details_expain.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>[
DetailsTopArea(),
DetailsExplain(),
],
),
);
}else{
return Text('加载中......');//没有数据的情况
}
},
),
);
} Future _getBackInfo(BuildContext context) async{
await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
//print('加载完成...........');
return '完成加载';
} }
details_page.dart
Flutter实战视频-移动电商-45.详细页_说明区域UI编写的更多相关文章
- Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页
43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...
- Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写
44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建 ...
- Flutter实战视频-移动电商-46.详细页_自定义TabBar Widget
46.详细页_自定义TabBar Widget 主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个 ...
- Flutter实战视频-移动电商-48.详细页_详情和评论的切换
48.详细页_详情和评论的切换 增加切换的效果,我们主要是修改这个地方 这样我们的评论的内容就显示出来了 最终代码 details_web.dart import 'package:flutter/m ...
- Flutter实战视频-移动电商-41.详细页_数据接口的调试
41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...
- Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局
30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...
- Flutter实战视频-移动电商-65.会员中心_订单区域UI布局
65.会员中心_订单区域UI布局 我的订单区域 member.dart写我的标题的方法 布局使用瓦片布局 先做修饰,decoration颜色的背景,下边线的样式 //我的订单标题 Widget _or ...
- Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用
47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...
- Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建
42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future ...
随机推荐
- final 和static
一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...
- 简单的HTML5音乐播放器(带歌词滚动)
// // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...
- python中if __name__ == '__main__': 的解析(转载)
当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...
- Struts2 (三) (转载)
前面一直在说Action可以是一个普通的Java类,与Servlet API完全分离,但是为了实现业务逻辑,Action需要使用HttpServletRequest内容.Struts 2设计的精巧之处 ...
- 九度OJ 1136:Number Steps(步数) (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:691 解决:412 题目描述: Starting from point (0,0) on a plane, we have written ...
- PHP开发工作心得
一.扎实PHP自身的基础知识.函数.常量等,尽量用内置的方法解决这个问题(由于个人写的往往运行效率没有内置方法高): 二.代码尽量少的实现功能(由于PHP的运行事实上是,将咱们的代码先处理成底层语言进 ...
- CSU - 1547 Rectangle —— DP(01背包)
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1547 题解: 关键是怎么处理长度为1的长方形.当长度为1的长方形的个数cnt> ...
- 未公开函数MessageBoxTimeOut 实现定时消息(ZT) MFC实现MessageBox自动消失
http://www.blogjava.net/baicker/archive/2007/07/13/130072.html #include <windows.h> #include & ...
- BluetoothLE-Multi-Library
github地址:https://github.com/qindachang/BluetoothLE-Multi-Library BluetoothLE-Multi-Library 一个能够连接多台蓝 ...
- js事件传播的一个疑惑
在学习事件传播的时候,发现一个问题,当时是这样子的. 我给多层元素分别绑定了冒泡和捕获事件.按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件. 但是天不随人愿啊,有个元素偏偏先执 ...