Flutter-防京东商城项目-收货地址列表、增加 修改收货地址布局、弹出省市区选择器-39
2024-04-29 15:45:18
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。
代码文档
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("张三 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(
Flutter-防京东商城项目-收货地址列表、增加 修改收货地址布局、弹出省市区选择器-39相关推荐
- 39 Flutter仿京东商城项目 收货地址列表、增加 修改收货地址布局、弹出省市区选择器...
加群452892873 下载对应39课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml city_pickers: ^0.1.22 AddressAdd.dart import ...
- Flutter-防京东商城项目-签名验证 增加收货地址、显示收货地址 事件广播-41
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-订单列表、订单详情页面布局-45
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-创建商品数据模型 、请求Api接口渲染热门商品 推荐商品 获取数据然后模型赋值-06
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-提交订单、去支付页面制作-44
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-编写注册(2)-35
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-编写注册(1)-34
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Flutter-防京东商城项目-状态管理 多页面数据共享-23
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- Github上开源仿京东商城项目-安装部署（二）
Github上开源仿京东商城项目-安装部署(二) 2.用IntelliJ IDEA 2020打开项目,选择SuperMarket目录, 将会自动安装相关项目的依赖包,这个时间大约1个半小时. 3.安装 ...
- 修改服务器的ip地址的命令,修改服务器ip地址命令行
修改服务器ip地址命令行 内容精选 换一换 Atlas 200 DK开发者板支持通过USB端口或者网线与Ubuntu服务器进行连接,连接示例图如图1所示.Atlas 200 DK连接Ubuntu服务器 ...
最新文章
- 99. Leetcode 322. 零钱兑换 (动态规划-完全背包)
- 计算机5G英语文献,无线通信英文参考文献精选
- LL-verilog索引向量+-号用法
- SQL中合并多行记录的方法总汇
- SCP 报错 not a regular file
- 微信8.0来了！黄脸表情会动了，还能扔炸弹...一大波新功能上线！
- jmeter测试之参数化---以测试多个用户登录为例。
- ubuntu 普通用户下设置tab键自动补全
- 新版jmeter图形化报告解析
- 8.BLE---错误码
- iOS 循环引用 委托 （实例说明）
- numpy.zeros(np.zeros)
- JAVA中public protected default private访问权限
- 关于使用 View Binding 不生效的记录
- 交换机芯片vlan管理
- 软件项目管理实验一补充
- web前端程序员真的值这么多钱吗？
- 例说图解TCP/IP协议族--PKI与证书(7)之给思科路由器制作证书
- 基于51单片机的电子记分牌的设计
- 背诵考研英语单词计划总览