【Flutter】仿京东地址选择器(多层级无限制)

最近在做Flutter开发，碰到产品提的新的需求，类似于京东的地址选择器，但是baidu了一堆，都只是定死层级的实现效果。不符合产品需求啊。自己码一个，记录一下。（可以根据需要，封装成通用工具）
写的不好，请大佬轻喷。

效果图

需要注意，这里使用的是

TickerProviderStateMixin

而不是

SingleTickerProviderStateMixin

上代码，注释很清楚。

class EventAreaDialog extends StatefulWidget {
  // 这个是我们网络拉取的数据，根据实际你所需要的去变。应该是个树形结构的model
  SpaceData spaceData;
  // 选中后的callback
  EventAreaDialogCallBack eventAreaDialogCallBack;

  EventAreaDialog({this.spaceData, this.eventAreaDialogCallBack});

  @override
  _EventAreaDialogState createState() => _EventAreaDialogState();
}

class _EventAreaDialogState extends State<EventAreaDialog>
    with TickerProviderStateMixin {
  //根据筛选出的数据
  Map<int, List<Children>> datas = new Map();
  //选中的model，根据业务需求获取所需要的信息
  Map<int, String> selectDatas = new Map();
  //选中的名称
  Map<int, String> selectNameDatas = new Map();
  //初始化的tab名称
  List<String> _tabs = ["请选择"];
  //tab的控制器
  TabController _tabController;
  //当前所选中的tab位置
  int currentTabPos = 0;

  @override
  void initState() {
    super.initState();
	//初始化第一层级所需要显示的内容
    List<Children> list = [];
    for (int i = 0; i < widget.spaceData.data.length; i++) {
      Data data = widget.spaceData.data[i];
      list.add(new Children(data.id, data.children, data.name));
    }
    //datas第一层级初始化赋值
    datas[currentTabPos] = list;
    _tabController = new TabController(length: _tabs.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: AnimatedPadding(
        padding: MediaQuery.of(context).viewInsets, //边距（必要）
        duration: const Duration(milliseconds: 100), //时常 （必要）
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
            ),
            color: Colors.white,
          ),
          height: 350,
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
              Container(
                padding: new EdgeInsets.only(left: 10, right: 10),
                height: 40,
                child: Scaffold(
                  backgroundColor: Colors.transparent,
                  appBar: TabBar(
                    controller: _tabController,
                    unselectedLabelColor: ColorUtils.TEXT_GRAY,
                    labelColor: ColorUtils.TEXT_BLUE,
                    indicatorColor: ColorUtils.TEXT_BLUE,
                    labelStyle: TextStyle(fontSize: 16),
                    isScrollable: true,
                    indicatorWeight: 3,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorPadding: new EdgeInsets.fromLTRB(8, 0, 8, 0),
                    onTap: (index) {
                      if (!mounted) {
                        return;
                      }
                      setState(() {
                        //获取当前tab有多少
                        int size = _tabs.length;
                        //记录当前位置
                        currentTabPos = index;
                        //循环处理，将当前位置之后的数据去除
                        for (int i = size; i > currentTabPos + 1; i--) {
                          _tabs.removeAt(i - 1);
                          selectDatas.remove(i - 1);
                          selectNameDatas.remove(i - 1);
                        }
                        //这一步是重新创建tab
                        _tabController = new TabController(
                            length: _tabs.length, vsync: this);
                        //将当前tab移动到选中的位置上
                        _tabController.animateTo(currentTabPos);
                      });
                    },
                    tabs: _tabs.map((e) => Tab(text: e)).toList(),
                  ),
                ),
              ),
              Expanded(
                  flex: 1,
                  child: TabBarView(
                    children: _buildPages(),
                    controller: _tabController,
                    physics: NeverScrollableScrollPhysics(),
                  )),
            ],
          ),
        ),
      ),
    );
  }

  /**
  *创建tab界面
  */
  List<Widget> _buildPages() {
    List<Widget> pages = List();
    for (int i = 0; i < _tabs.length; i++) {
      Widget page = new ListView.builder(
        padding: EdgeInsets.only(top: 15),
        itemCount: datas[currentTabPos].length,
        itemBuilder: (BuildContext context, int index) {
          return _getListItem(index);
        },
        physics: new BouncingScrollPhysics(),
        shrinkWrap: true,
      );
      pages.add(page);
    }
    return pages;
  }

  /**
  *创建每个界面的item显示
  */
  Widget _getListItem(int index) {
    Children children = datas[currentTabPos][index];
    return GestureDetector(
      child: Container(
        alignment: Alignment.centerLeft,
        color: Colors.white,
        height: 50,
        padding: new EdgeInsets.only(left: 15),
        child: Text(children.name, style: TextStyle(fontSize: 15, color: selectDatas[currentTabPos] == children.id ? ColorUtils.TEXT_BLUE : ColorUtils.TEXT_GRAY),),
      ),
      onTap: () {
        if (!mounted) {
          return;
        }
        setState(() {
          if (currentTabPos > 0 && index == 0) {
            Navigator.pop(context);
            return;
          }
          if (children.children != null && children.children.length > 0) {//这是选中的tab还有下级数据时
            _tabs[currentTabPos] = children.name;
            currentTabPos++;
            //加上一条【暂不选择】的空数据
            if(children.children[0].id != "-1") {
              children.children.insert(0, new Children("-1", [], "暂不选择"));
            }
            //修改datas的数据源
            datas[currentTabPos] = children.children;
            selectDatas[currentTabPos - 1] = children.id;
            selectNameDatas[currentTabPos - 1] = children.name;
            _tabs.add("请选择");
            _tabController =
                new TabController(length: _tabs.length, vsync: this);
            _tabController.animateTo(currentTabPos);
          } else {//这是选中的tab没有下级数据时
            _tabs[currentTabPos] = children.name;
            selectDatas[currentTabPos] = children.id;
            selectNameDatas[currentTabPos] = children.name;
            Navigator.pop(context);
          }
          //将选中的区域id添加到集合，根据自己的业务去甄别
          List<String> areaIds = [];
          for(int i = 0; i < selectDatas.length; i++) {
            areaIds.add(selectDatas[i]);
          }
          //这个是处理选中的名称拼接，根据自己的业务去甄别
          String names = "";
          for(int i = 0; i < selectNameDatas.length; i++) {
            if (i == selectNameDatas.length - 1) {
              names += selectNameDatas[i];
            } else {
              names += "${selectNameDatas[i]}-";
            }
          }
          //将选中的数据实时回调到需要的地方
          widget.eventAreaDialogCallBack.onEventAreaDialogCallBack(names, areaIds);
        });
      },
    );
  }
}

最后使用方法

showModalBottomSheet(
	isScrollControlled: true,
    context: context,
    builder: (ctx) => EventAreaDialog(
        spaceData: spaceData,
        eventAreaDialogCallBack: this,
),backgroundColor: ColorUtils.CLEAR);