一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。
效果：
1.修改一个BUG。当确单页面没有地址的时候提示修改地址才能跳去支付页面。
添加下面的代码
导入
import 'package:fluttertoast/fluttertoast.dart';
child: RaisedButton(
child:
Text('立即下单', style: TextStyle(color: Colors.white)),
color: Colors.red,
onPressed: () async {
if (this._addressList.length > 0) {
//--------------------------------------------
....
//跳转到支付页面
Navigator.pushNamed(context, '/pay');
}
//--------------------------------------------
} else {
Fluttertoast.showToast(
msg: '请填写收货地址',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
);
}
//--------------------------------------------
2.编写订单列表
2.1首先先看一下下面的图片，这个订单列表的结构图
2.2.把订单列表跟订单详情拖进来。
Order
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
import '../widget/JdButton.dart';
class OrderPage extends StatefulWidget {
OrderPage({
Key key}) : super(key: key);
_OrderPageState createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("我的订单"),
),
body: Stack(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, ScreenAdaper.height(80), 0, 0),
padding: EdgeInsets.all(ScreenAdaper.width(16)),
child: ListView(
children: <Widget>[
Card(
child: Column(
children: <Widget>[
ListTile(
title: Text("订单编号：xxxxxxxx"),
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Text("合计：￥345"),
trailing: FlatButton(
child: Text("申请售后"),
onPressed: () {
},
color: Colors.grey[100],
),
),
],
),
),
Card(
child: Column(
children: <Widget>[
ListTile(
title: Text("订单编号：xxxxxxxx"),
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Text("合计：￥345"),
trailing: FlatButton(
child: Text("申请售后"),
onPressed: () {
},
color: Colors.grey[100],
),
),
],
),
),
Card(
child: Column(
children: <Widget>[
ListTile(
title: Text("订单编号：xxxxxxxx"),
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Container(
width: ScreenAdaper.width(120),
height: ScreenAdaper.height(120),
child: Image.network(
'https://www.itying.com/images/flutter/list2.jpg',
fit: BoxFit.cover,
),
),
title: Text("6小时学会TypeScript入门实战视频教t入门实战视"),
trailing: Text('x1'),
onTap: (){
Navigator.pushNamed(context, '/orderinfo');
},
),
SizedBox(height: 10),
ListTile(
leading: Text("合计：￥345"),
trailing: FlatButton(
child: Text("申请售后"),
onPressed: () {
},
color: Colors.grey[100],
),
),
],
),
)
],
),
),
Positioned(
top: 0,
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(76),
child: Container(
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(76),
color: Colors.white,
child: Row(
children: <Widget>[
Expanded(
child: Text("全部", textAlign: TextAlign.center),
),
Expanded(
child: Text("待付款", textAlign: TextAlign.center),
),
Expanded(
child: Text("待收货", textAlign: TextAlign.center),
),
Expanded(
child: Text("已完成", textAlign: TextAlign.center),
),
Expanded(
child: Text("已取消", textAlign: TextAlign.center),
)
],
),
),
)
],
),
);
}
}
OrderInfo
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class OrderInfoPage extends StatefulWidget {
OrderInfoPage({
Key key}) : super(key: key);
_OrderInfoPageState createState() => _OrderInfoPageState();
}
class _OrderInfoPageState extends State<OrderInfoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("订单详情")),
body: Container(
child: ListView(
children: <Widget>[
//收货地址
Container(
color: Colors.white,
child: Column(
children: <Widget>[
SizedBox(height: 10),
ListTile(
leading: Icon(Icons.add_location),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201686455"),
SizedBox(height: 10),
Text("北京市海淀区 西二旗"),
],
),
),
SizedBox(height: 10),
],
),
),
SizedBox(height: 16),
//列表
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
width: ScreenAdaper.width(120),
child: Image.network(
"https://www.itying.com/images/flutter/list2.jpg",
fit: BoxFit.cover),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("四季沐歌 (MICOE) 洗衣机水龙头 洗衣机水嘴 单冷快开铜材质龙头",
maxLines: 2,
style: TextStyle(color: Colors.black54)),
Text("水龙头 洗衣机",
maxLines: 2,
style: TextStyle(color: Colors.black54)),
ListTile(
leading: Text("￥100",
style: TextStyle(color: Colors.red)),
trailing: Text("x2"),
)
],
),
))
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
width: ScreenAdaper.width(120),
child: Image.network(
"https://www.itying.com/images/flutter/list2.jpg",
fit: BoxFit.cover),
),
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("四季沐歌 (MICOE) 洗衣机水龙头 洗衣机水嘴 单冷快开铜材质龙头",
maxLines: 2,
style: TextStyle(color: Colors.black54)),
Text("水龙头 洗衣机",
maxLines: 2,
style: TextStyle(color: Colors.black54)),
ListTile(
leading: Text("￥100",
style: TextStyle(color: Colors.red)),
trailing: Text("x2"),
)
],
),
))
],
),
],
),
),
//详情信息
Container(
color: Colors.white,
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: <Widget>[
ListTile(
title: Row(
children: <Widget>[
Text("订单编号:",style: TextStyle(fontWeight: FontWeight.bold)),
Text("124215215xx324")
],
),
),
ListTile(
title: Row(
children: <Widget>[
Text("下单日期:",style: TextStyle(fontWeight: FontWeight.bold)),
Text("2019-12-09")
],
),
),
ListTile(
title: Row(
children: <Widget>[
Text("支付方式:",style: TextStyle(fontWeight: FontWeight.bold)),
Text("微信支付")
],
),
),
ListTile(
title: Row(
children: <Widget>[
Text("配送方式:",style: TextStyle(fontWeight: FontWeight.bold)),
Text("顺丰")
],
),
)
],
),
),
SizedBox(height: 16),
Container(
color: Colors.white,
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
children: <Widget>[
ListTile(
title: Row(
children: <Widget>[
Text("总金额:",style: TextStyle(fontWeight: FontWeight.bold)),
Text("￥414元",style: TextStyle(
color: Colors.red
))
],
)
)
],
),
)
],
),
),
);
}
}
3.配置路由。
import '../pages/Order.dart';
import '../pages/OrderInfo.dart';
'/order': (context) => OrderPage(),
'/orderinfo': (context) => OrderInfoPage(),
4.回到用户个人中心
ListTile(
leading: Icon(Icons.assignment, color: Colors.red),
title: Text("全部订单"),
onTap: (){
Navigator.pushNamed(context, '/order');//--------------------------------
},
),
文章评论