Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写
44.详细页_首屏自定义Widget编写
把详细页的图片、标题、编号和价格形成一个单独的widget去引用
详情页的顶部单独封装个插件
在pages下面新建detials_page的文件件并在里面新建页面details_top_area.dart文件
添加引用,然后声明一个静态的类
返回顶部图片的方法
商品名称方法:
商品编号方法
开始写Build
最外层是一个Provide,里面model类传递的是商品详情的类
在主页内引用子组件
首先引入我们写的组件的页面文件,然后调用我们写的组件的类就可以了。
DetailsTopArea
效果展示
点击首页的轮播图就看到详情的页面了。
最终代码:
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.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(),
],
),
);
}else{
return Text('加载中......');//没有数据的情况
}
},
),
);
} Future _getBackInfo(BuildContext context) async{
await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
//print('加载完成...........');
return '完成加载';
} }
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsTopArea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<DetailsInfoProvide>(
builder: (context,child,val){
var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;
if(goodsInfo!=null){
return Container(
color: Colors.white,
child: Column(
children: <Widget>[
_goodsImage(goodsInfo.image1),
_goodsName(goodsInfo.goodsName),
_goodsNum(goodsInfo.goodsSerialNumber)
],
),
);
}else{
return Text('正在记载中');
}
},
);
}
//商品图片
Widget _goodsImage(url){
return Image.network(
url,
width:ScreenUtil().setWidth(),
);
}
//商品名称
Widget _goodsName(name){
return Container(
width:ScreenUtil().setWidth(),
padding: EdgeInsets.only(left:15.0),//左侧的边距
child: Text(
name,//传过来的标题
style:TextStyle(
fontSize: ScreenUtil().setSp()//设置字体的大小
)
),
);
}
//商品编号
Widget _goodsNum(num){
return Container(
width: ScreenUtil().setWidth(),
padding: EdgeInsets.only(left:5.0),
margin: EdgeInsets.only(top: 8.0),
child: Text(
'编号:${num}',
style: TextStyle(
color: Colors.black12,
),
),
);
} }
价格的Widget
参考博客上的代码:
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; class DetailsTopArea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Provide<DetailsInfoProvide>(
builder: (context,child,val){
var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;
if(goodsInfo!=null){
return Container(
color: Colors.white,
child: Column(
children: <Widget>[
_goodsImage(goodsInfo.image1),
_goodsName(goodsInfo.goodsName),
_goodsNum(goodsInfo.goodsSerialNumber),
_goodsPrice(goodsInfo.presentPrice,goodsInfo.oriPrice),
],
),
);
}else{
return Text('正在记载中');
}
},
);
}
//商品图片
Widget _goodsImage(url){
return Image.network(
url,
width:ScreenUtil().setWidth(),
);
}
//商品名称
Widget _goodsName(name){
return Container(
width:ScreenUtil().setWidth(),
padding: EdgeInsets.only(left:15.0),//左侧的边距
child: Text(
name,//传过来的标题
style:TextStyle(
fontSize: ScreenUtil().setSp()//设置字体的大小
)
),
);
}
//商品编号
Widget _goodsNum(num){
return Container(
width: ScreenUtil().setWidth(),
padding: EdgeInsets.only(left:5.0),
margin: EdgeInsets.only(top: 8.0),
child: Text(
'编号:${num}',
style: TextStyle(
color: Colors.black12,
),
),
);
}
//商品价格
Widget _goodsPrice(presentPrice,oriPrice){
return Container(
width: ScreenUtil().setWidth(),
padding: EdgeInsets.only(left:15.0),
margin: EdgeInsets.only(top:8.0),
child: Row(
children: <Widget>[
Text(
'¥${presentPrice}',
style:TextStyle(
color: Colors.pinkAccent,
fontSize: ScreenUtil().setSp(),
)
),
Text(
'市场价:¥${oriPrice}',
style: TextStyle(
color: Colors.black26,
decoration: TextDecoration.lineThrough
),
)
],
),
);
} }
details_top_area.dart
效果展示:
Flutter实战视频-移动电商-44.详细页_首屏自定义Widget编写的更多相关文章
- Flutter实战视频-移动电商-43.详细页_补充首页跳转到详细页
43.详细页_补充首页跳转到详细页 首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.ro ...
- 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实战视频-移动电商-41.详细页_数据接口的调试
41.详细页_数据接口的调试 建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试 生成model类 json数据: { ", "message": "s ...
- Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写
把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...
- Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用
47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...
- Flutter实战视频-移动电商-42.详细页_UI主页面架构搭建
42.详细页_UI主页面架构搭建 详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future ...
- Flutter实战视频-移动电商-49.详细页_Stack制作底部工具栏
49.详细页_Stack制作底部工具栏 一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 ...
随机推荐
- OpenCV load 运行出错 cv::Exception 出错
今天在使用OpenCV的load函数时,出现错误,代码如下: cascade = (CvHaarClassifierCascade*)cvLoad( cascade_name, 0, 0, 0 ); ...
- hdoj 5094 Maze 【BFS + 状态压缩】 【好多坑】
Maze Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 100000/100000 K (Java/Others) Total Sub ...
- SpringMVC学习(一):搭建SpringMVC-注解-非注解
文章参考:http://www.cnblogs.com/Sinte-Beuve/p/5730553.html 一.环境搭建: 目录结构: 引用的JAR包: 如果是Maven搭建的话pom.xml配置依 ...
- IOS UIWebView 随记
UIWebView中加载的网页尺寸太大,如何让网页适应屏幕大小 webview.scalesPageToFit = YES;
- ASP.NET页面之间传值的几种方式
1. QueryString 当页面上的form以get方式向页面发送请求数据时,web server将请求数据放入一名为QEURY_STRING的环境变量中,QeueryString方法从这个变量 ...
- [转]JavaScript
javascript 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border on ...
- 初探IO复用
前言 在之前的文章中,我具体实现了一个并发回射服务器并给它加载了僵尸子进程的自动清理信号机制.在正常情况下,它已经可以很好地工作了,但它能否合理应对一些特殊情况呢? 问题发现 先来看看当服务器的客户子 ...
- 02-合并frame
进入IJKMediaPlayer工程--->
- 个人开发者帐号--我是如何实现在另一台mac上真机调试的
本文转载至 : http://blog.csdn.net/chenyong05314/article/details/8689534 注:本人有一台mac电脑,之前申请开发者帐号的时候直接就是在这 ...
- EasyDarwin开源流媒体服务器提供的RTMP直播推送库
EasyRTMP EasyRTMP是什么? EasyRTMP是一个EasyDarwin配套使用,也可以单独使用的RTMP推送库,通过EasyRTMP我们就可以避免接触到稍显复杂的RTMP推送流程,只需 ...