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='';
  @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(