Flutter-防京东商城项目-编写结算页面-37
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。37的笔记丢失了,后期会补上的,敬请期待...
·
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
本章结果:
CheckOut 页面的代码
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class CheckOutPage extends StatefulWidget {
CheckOutPage({Key key}) : super(key: key);
_CheckOutPageState createState() => _CheckOutPageState();
}
class _CheckOutPageState extends State<CheckOutPage> {
Widget _checkOutItem() {
return Row(
children: <Widget>[
Container(
width: ScreenAdaper.width(160),
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("Flutter仿京东商城项目实战视频教程", maxLines: 2),
Text("白色,175", maxLines: 2),
Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child:
Text("¥111", style: TextStyle(color: Colors.red)),
),
Align(
alignment: Alignment.centerRight,
child: Text("x2"),
)
],
)
],
),
))
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("结算"),
),
body: Stack(
children: <Widget>[
ListView(
children: <Widget>[
Container(
color: Colors.white,
child: Column(
children: <Widget>[
// ListTile(
// leading: Icon(Icons.add_location),
// title: Center(
// child: Text("请添加收货地址"),
// ),
// trailing: Icon(Icons.navigate_next),
// )
SizedBox(height: 10),
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201681234"),
SizedBox(height: 10),
Text("北京市海淀区西二旗"),
],
),
trailing: Icon(Icons.navigate_next),
),
SizedBox(height: 10),
],
),
),
SizedBox(height: 20),
Container(
color: Colors.white,
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: Column(
children: <Widget>[
_checkOutItem(),
Divider(),
_checkOutItem(),
Divider(),
_checkOutItem()
],
),
),
SizedBox(height: 20),
Container(
color: Colors.white,
padding: EdgeInsets.all(ScreenAdaper.width(20)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("商品总金额:¥100"),
Divider(),
Text("立减:¥5"),
Divider(),
Text("运费:¥0"),
],
),
)
],
),
Positioned(
bottom: 0,
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(100),
child: Container(
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(100),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(
width: 1,
color: Colors.black26
)
)
),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text("总价:¥140", style: TextStyle(color: Colors.red)),
),
Align(
alignment: Alignment.centerRight,
child: RaisedButton(
child:
Text('立即下单', style: TextStyle(color: Colors.white)),
color: Colors.red,
onPressed: (){
},
),
)
],
),
),
)
],
),
);
}
}
回到routers页面

import '../pages/CheckOut.dart';
'/checkOut': (context) => CheckOutPage(),
回到Cart 购物车页面

创建结算方法
//去结算
doCheckOut(){
//判断用户有没有登录 保存购物车选中的数据
Navigator.pushNamed(context, '/checkOut');
}
调用结算方法
doCheckOut
更多推荐
所有评论(0)