一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
代码文档
Flutter防京东商城源码(1-10)链接
Flutter防京东商城源码(11-20)链接
Flutter防京东商城源码(21-30)链接
Flutter防京东商城源码(31-46)链接
本章效果:
本章目标:
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='';@overrideWidget 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> {@overrideWidget 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> {@overrideWidget 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("张三 1581234"),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("张三 1581234"),// 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(