100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Flutter-防京东商城项目-收货地址列表 增加 修改收货地址布局 弹出省市区选择器-39

Flutter-防京东商城项目-收货地址列表 增加 修改收货地址布局 弹出省市区选择器-39

时间:2023-12-02 09:51:08

相关推荐

Flutter-防京东商城项目-收货地址列表 增加 修改收货地址布局 弹出省市区选择器-39

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

代码文档

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(

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。