1.jpg

2.jpg

3.jpg

樣式如圖

貼代碼

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/common/Constant.dart';
import 'package:flutter_app/common/http/Api.dart';
import 'package:flutter_app/common/http/ApiUrl.dart';
import 'package:flutter_app/model/user_center/HHSRegion.dart';
import 'package:flutter_app/model/user_center/LocalQueryBean.dart';


///地址選擇器
class SelectAddressWidget extends StatefulWidget {

  SelectAddressWidget({Key key, @required this.valueCb}) :super(key: key);

  ///回調(diào)函數(shù)
  final Function valueCb;

  @override
  _SelectAddressWidgetState createState() => new _SelectAddressWidgetState();
}

class _SelectAddressWidgetState extends State<SelectAddressWidget>
    with SingleTickerProviderStateMixin {

  ///區(qū)域信息列表
  List<HHSRegion> localList;

  ///TabBarController
  TabController _tabController;

  ///選擇的省市縣的名字
  String selectProvinceStr = '省份';
  String selectCityStr = '城市';
  String selectDistrictStr = '區(qū)/縣';

  ///選擇的省市縣Id
  int selectProvinceId = -1;
  int selectCityId = -1;
  int selectDistrictId = -1;

  ///當(dāng)前Tab位置
  int currentTabPos = 0;

  Map<String, int> selectMap = new Map();

  ///Tab Text樣式
  TextStyle tabTvStyle = new TextStyle(
      color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.w300);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    ///給區(qū)域Id Map一個(gè)初始值
    selectMap['selectProvinceId'] = -1;
    selectMap['selectCityId'] = -1;
    selectMap['selectDistrictId'] = -1;

    ///初始化控制器
    _tabController = new TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      ///獲取tab當(dāng)前點(diǎn)擊位置
      currentTabPos = _tabController.index;
      ///切換Tab重新請(qǐng)求列表數(shù)據(jù)
      if (_checkTabCanSelect(currentTabPos)) {
        _queryLocal(currentTabPos == 0 ? 1 : currentTabPos == 1
            ? selectProvinceId
            : selectCityId);
      }

      print(currentTabPos);
    });

    ///第一次進(jìn)來(lái) 這里調(diào)用我自己的接口 查詢?nèi)珖?guó)的所有省 可以替換成其他
    _queryLocal(1);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(

        ///去掉左箭頭
        automaticallyImplyLeading: false,
        title: new Text(
          '配送至', style: new TextStyle(color: const Color(0xff666666)),),
        centerTitle: true,
        elevation: 0.5,
        backgroundColor: Colors.white,
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.close, color: const Color(0xff666666),),
              onPressed: () => Navigator.pop(context))
        ],
      ),
      body: _getBody(),
    );
  }

  ///構(gòu)建底部視圖
  Widget _getBody() {
    if (_showLoadingDialog()) {
      return new Center(child: new CircularProgressIndicator(),);
    } else {
      return _buildContent();
    }
  }

  ///根據(jù)數(shù)據(jù)是否有返回顯示加載條或者列表
  bool _showLoadingDialog() {
    if (localList == null || localList.length == 0) {
      return true;
    } else {
      return false;
    }
  }

  ///有數(shù)據(jù)時(shí)構(gòu)建tab和區(qū)域列表
  Widget _buildContent() {
    return new Container(
      child: new Column(
        children: <Widget>[
          new Padding(padding: const EdgeInsets.only(top: 18.0)),
          new TabBar(
            indicatorColor: Colors.black,
            controller: _tabController,
            tabs: <Widget>[
              new Text('$selectProvinceStr', style: tabTvStyle, maxLines: 1,),
              new Text('$selectCityStr', style: tabTvStyle, maxLines: 1,),
              new Text('$selectDistrictStr', style: tabTvStyle, maxLines: 1,),
            ],
          ),
          new Padding(padding: const EdgeInsets.only(top: 18.0)),

          _buildListView(),
        ],
      ),
      color: Colors.white,
    );
  }

  ///構(gòu)建列表
  Widget _buildListView() {
    return new Expanded(
        child: new ListView.builder(
          shrinkWrap: true,
          itemCount: localList.length,
          itemBuilder: (BuildContext context, int position) {
            return _buildListRow(position);
          },
        )
    );
  }

  ///構(gòu)建子項(xiàng)
  Widget _buildListRow(int position) {
    return new ListTile(
      title: new Text('${localList[position].regionName}',
        style: new TextStyle(color: const Color(0xff666666), fontSize: 15.0),),
      onTap: () => _onLocalSelect(position),);
  }

  ///區(qū)域位置選擇
  _onLocalSelect(int position) {
    _setSelectData(position);
    if (currentTabPos != 2) {
      _queryLocal(localList[position].regionId);
    }
  }

  ///設(shè)置選擇的數(shù)據(jù)
  ///根據(jù)當(dāng)前選擇的列表項(xiàng)的position 和 Tab的currentTabPos
  ///@params position 當(dāng)前列表選擇的省或市或縣的position
  _setSelectData(position) {
    if (currentTabPos == 0) {
      selectProvinceId = localList[position].regionId;
      selectProvinceStr = localList[position].regionName;
      selectMap['provinceId'] = selectProvinceId;
      setState(() {
        selectCityStr = '城市';
        selectDistrictStr = '區(qū)/縣';
      });
      selectCityId = -1;
      selectDistrictId = -1;
    }

    if (currentTabPos == 1) {
      selectCityId = localList[position].regionId;
      selectCityStr = localList[position].regionName;
      selectMap['selectCityId'] = selectCityId;
      setState(() {
        selectDistrictStr = '區(qū)/縣';
      });
      selectDistrictId = -1;
    }
    if (currentTabPos == 2) {
      selectDistrictId = localList[position].regionId;
      selectDistrictStr = localList[position].regionName;
      selectMap['selectDistrictId'] = selectDistrictId;

      ///拼接區(qū)域字符串 回調(diào)給上個(gè)頁(yè)面 關(guān)閉彈窗
      String localStr = selectProvinceStr + ' ' + selectCityStr + ' ' +
          selectDistrictStr;
      widget.valueCb(selectMap, localStr);
      Navigator.pop(context);
    }
    currentTabPos++;
    _tabController.animateTo(currentTabPos);
  }

  ///檢查是否可以選擇下級(jí)Tab
  bool _checkTabCanSelect(int position) {
    if (position == 0) {
      return true;
    }
    if (position == 1) {
      if (selectProvinceId == -1) {
        _tabController.animateTo(0);
        _showSnack();
        return false;
      }
      return true;
    }

    if (position == 2) {
      if (selectProvinceId == -1 && selectCityId == -1) {
        _tabController.animateTo(0);
        _showSnack();
        return false;
      }
      if (selectProvinceId != -1 && selectCityId == -1) {
        _tabController.animateTo(1);
        _showSnack();
        return false;
      }
      return true;
    }
  }

  ///顯示錯(cuò)誤信息
  _showSnack() {
    Scaffold.of(context).showSnackBar(
        new SnackBar(content: new Text('請(qǐng)先選擇上級(jí)地區(qū)')));
  }

  ///查詢區(qū)域信息
  _queryLocal(int parentId) {
    String url = Constant.HOST + ApiUrl.LOCAL_QUERY;
    Map<String, dynamic> params = new Map();
    params['parentId'] = parentId;
    Api.post(url, (Response response) {
      LocalQueryBean localQueryBean = LocalQueryBean.fromJSON(response.data);

      ///這里防止沒(méi)有區(qū)的城市查詢不到還不會(huì)關(guān)閉對(duì)話框回調(diào)到地址頁(yè)面 例如三亞市
      ///寫(xiě)的有點(diǎn)亂
      if (currentTabPos == 2 && localQueryBean.regionList == null) {
        String localStr = selectProvinceStr + ' ' + selectCityStr;
        widget.valueCb(selectMap, localStr);
        Navigator.pop(context);
      }

      setState(() {
        localList = localQueryBean.regionList;
      });
    },
        errorCallBack: (errMsg) {

        },
        params: params);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _tabController.dispose();
    super.dispose();
  }
}

HHSRegion類

import 'package:json_annotation/json_annotation.dart';

part 'HHSRegion.g.dart';

@JsonSerializable()
class HHSRegion {
  int regionId; // 當(dāng)前區(qū)域ID
  int parentId; // 當(dāng)前區(qū)域父ID
  String regionName; // 區(qū)域名字
  int regionType; // 區(qū)域類型(0:國(guó);1:省;2:市;3:區(qū))
  int agencyId;

  HHSRegion(this.regionId, this.parentId, this.regionName, this.regionType,
      this.agencyId); // 不知道是啥

  //反序列化
  factory HHSRegion.fromJson(Map<String, dynamic> json)=>
      _$HHSRegionFromJson(json);

  //序列化
  Map<String, dynamic> toJson() => _$HHSRegionToJson(this);


}

需要將 _queryLocal（int parentId）這個(gè)方法替換成你自己的請(qǐng)求地址列表 或者加載本地JSON

做的不完善 而且靈活度非常低 對(duì)于選擇地址應(yīng)該夠了 再變態(tài)也改不到哪去了

使用方法

///顯示選擇所在地址彈窗
  _showSelectAddrDialog() {
    ///顯示一個(gè)BottomSheet
    showModalBottomSheet(
      context: context,
      ///_handleLocal是被回調(diào)頁(yè)面的方法 用于接收選擇的地址
      builder: (context) => new SelectAddressWidget(valueCb: _handleLocal,),
    );
  }