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

浅浅的花香味﹌ 2023-08-17 15:59 129阅读 0赞

加群***452892873** *下载对应39课文件，运行方法，建好项目，直接替换lib目录

pubspec.yaml

city_pickers: ^0.1.22

AddressAdd.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    import 'package:flutter_jdshop/widget/JdButton.dart';
    import 'package:flutter_jdshop/widget/JdText.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(
              child: ListView(
                children: <Widget>[
                  JdText(
                    text: "收货人姓名",
                  ),
                  SizedBox(height: 10),
                  JdText(
                    text: "收货人电话",
                  ),
                  SizedBox(height: 10),
                  Container(
                    padding: EdgeInsets.only(left: 5),
                    height: ScreenAdapter.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.black54)),
                            confirmWidget:
                                Text("确定", style: TextStyle(color: Colors.blue)));
    
                        setState(() {
                          this.area =
                              "${result.provinceName}/${result.cityName}/${result.areaName}";
                        });
                      },
                    ),
                  ),
                  SizedBox(height: 10),
                  JdText(
                    text: "详细地址",
                    maxLines: 4,
                    height: 200,
                  ),
                  SizedBox(height: 10),
                  RaisedButton(
                    child: Text("弹出省市区"),
                    onPressed: () async {
                      Result result = await CityPickers.showCityPicker(
                          context: context,
                          cancelWidget:
                              Text('取消', style: TextStyle(color: Colors.black54)),
                          confirmWidget:
                              Text("确定", style: TextStyle(color: Colors.blue)));
                    },
                  ),
                  SizedBox(height: 40),
                  JdButton(
                    text: "增加",
                    color: Colors.red,
                  )
                ],
              ),
            ));
      }
    }

AddressEdit.dart

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.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.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>[
                  ListTile(
                    leading: Icon(Icons.check, color: Colors.red),
                    title: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("张三 13325187796"),
                          SizedBox(height: 10),
                          Text('北京')
                        ]),
                    trailing: Icon(Icons.edit, color: Colors.blue),
                  )
                ],
              ),
              Positioned(
                bottom: 0,
                width: ScreenAdapter.width(750),
                height: ScreenAdapter.height(88),
                child: Container(
                    padding: EdgeInsets.all(5),
                    width: ScreenAdapter.width(750),
                    height: ScreenAdapter.height(100),
                    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');
                      },
                    )),
              )
            ],
          )),
        );
      }
    }

JdText.dart

import 'package:flutter/material.dart';
    import 'package:flutter_jdshop/services/ScreenAdapter.dart';
    class JdText extends StatelessWidget {
      final String text;
      final bool password;
      final Object onChanged;
      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);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          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(
            // color: Color.fromRGBO(233,233,233,0.8),
            // borderRadius: BorderRadius.circular(30)
            border: Border(
              bottom:BorderSide(
                width: 1,
                color: Colors.black12
              )
            )
          ),
          
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11560412.html