一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
本章效果:
本章目标:
1.编写地址列表,
2.编写增加地址控制器
3.创建编辑地址控制器,里面还没有写艾玛
1.把地址控制器拖进来
AddressAdd
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
import '../../widget/JDText.dart';
import '../../widget/JdButton.dart';
import 'package:city_pickers/city_pickers.dart';
class AddressAddPage extends StatefulWidget {
AddressAddPage({Key key}) : super(key: key);
_AddressAddPageState createState() => _AddressAddPageState();
}
class _AddressAddPageState extends State<AddressAddPage> {
String area='';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("增加收货地址"),
),
body: Container(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
SizedBox(height: 20),
JdText(
text: "收货人姓名",
),
SizedBox(height: 10),
JdText(
text: "收货人电话",
),
SizedBox(height: 10),
Container(
padding: EdgeInsets.only(left: 5),
height: ScreenAdaper.height(68),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1, color: Colors.black12))),
child: InkWell(
child: Row(
children: <Widget>[
Icon(Icons.add_location),
this.area.length>0?Text('${this.area}', style: TextStyle(color: Colors.black54)):Text('省/市/区', style: TextStyle(color: Colors.black54))
],
),
onTap: () async{
Result result = await CityPickers.showCityPicker(
context: context,
cancelWidget:
Text("取消", style: TextStyle(color: Colors.blue)),
confirmWidget:
Text("确定", style: TextStyle(color: Colors.blue))
);
// print(result);
setState(() {
this.area= "${result.provinceName}/${result.cityName}/${result.areaName}";
});
},
),
),
SizedBox(height: 10),
JdText(
text: "详细地址",
maxLines: 4,
height: 200,
),
SizedBox(height: 10),
SizedBox(height: 40),
JdButton(text: "增加", color: Colors.red)
],
),
));
}
}
AddressEdit
import 'package:flutter/material.dart';
class AddressEditPage extends StatefulWidget {
AddressEditPage({Key key}) : super(key: key);
_AddressEditPageState createState() => _AddressEditPageState();
}
class _AddressEditPageState extends State<AddressEditPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("修改收货地址"),
),
body: Text("修改收货地址")
);
}
}
AddressList
import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';
class AddressListPage extends StatefulWidget {
AddressListPage({Key key}) : super(key: key);
_AddressListPageState createState() => _AddressListPageState();
}
class _AddressListPageState extends State<AddressListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("收货地址列表"),
),
body: Container(
child: Stack(
children: <Widget>[
ListView(
children: <Widget>[
SizedBox(height: 20),
ListTile(
leading: Icon(Icons.check, color: Colors.red),
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201681234"),
SizedBox(height: 10),
Text("北京市海淀区西二旗"),
]),
trailing: Icon(Icons.edit, color: Colors.blue),
),
Divider(height: 20),
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201xxxx234"),
SizedBox(height: 10),
Text("北京市海defdsafaf西二旗"),
]),
trailing: Icon(Icons.edit, color: Colors.blue),
),
Divider(height: 20),
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201xxxx234"),
SizedBox(height: 10),
Text("北京市海defdsafaf西二旗"),
]),
trailing: Icon(Icons.edit, color: Colors.blue),
),
Divider(height: 20),
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201xxxx234"),
SizedBox(height: 10),
Text("北京市海defdsafaf西二旗"),
]),
trailing: Icon(Icons.edit, color: Colors.blue),
),
Divider(height: 20),
ListTile(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("张三 15201xxxx234"),
SizedBox(height: 10),
Text("北京市海defdsafaf西二旗"),
]),
trailing: Icon(Icons.edit, color: Colors.blue),
),
],
),
Positioned(
bottom: 0,
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(88),
child: Container(
padding: EdgeInsets.all(5),
width: ScreenAdaper.width(750),
height: ScreenAdaper.height(88),
decoration: BoxDecoration(
color: Colors.red,
border: Border(
top: BorderSide(width: 1, color: Colors.black26))),
child: InkWell(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.white),
Text("增加收货地址", style: TextStyle(color: Colors.white))
],
),
onTap: (){
Navigator.pushNamed(context,'/addressAdd');
},
),
),
)
],
),
));
}
}
2.配置路由
导入
import '../pages/Address/AddressAdd.dart';
import '../pages/Address/AddressEdit.dart';
import '../pages/Address/AddressList.dart';
'/addressAdd': (context) => AddressAddPage(),
'/addressEdit': (context) => AddressEditPage(),
'/addressList': (context) => AddressListPage(),
3.回到修改下面的代码
children: <Widget>[
//--------------------------------------------
ListTile(
leading: Icon(Icons.add_location),
title: Center(
child: Text("请添加收货地址"),
),
trailing: Icon(Icons.navigate_next),
onTap: (){
Navigator.pushNamed(context, '/addressList');
},
)
//--------------------------------------------
// 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),
],
4.安装第三方
#地址选择器
city_pickers: ^0.1.22
5.修改控件
增加多两个属性
final int maxLines;
final double height;
初始化
JdText({Key key,this.text="输入内容",this.password=false,this.onChanged=null,this.maxLines=1,this.height=68}) : super(key: key);
修改红色的内容
child: TextField(
maxLines:this.maxLines ,//--------------------------------------------
obscureText: this.password,
decoration: InputDecoration(
hintText: this.text,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide.none)),
onChanged: this.onChanged,
),
height: ScreenAdapter.height(this.height),//----------------
decoration: BoxDecoration(