省市区三级联动，这个需求在大多说的应用中是个常见的功能，没事就出来制造个轮子。
直接上图，看效果图
fa06859e95e45dcd3c183afe610e83c7.jpg
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'dart:convert';
typedef List<Widget> CreateWidgetList();
class CityPicker {
static Widget show() {
return new _CityPicker();
}
}
class _CityPicker extends StatefulWidget {
@override
State createState() {
return new _CityPickerState();
}
}
class _CityPickerState extends State<_CityPicker> {
List data = new List();
List province = new List();
List city = new List();
List area = new List();
FixedExtentScrollController provinceController =
new FixedExtentScrollController();
FixedExtentScrollController cityController =
new FixedExtentScrollController();
FixedExtentScrollController areaController =
new FixedExtentScrollController();
int provinceIndex = 0;
int cityIndex = 0;
int areaIndex = 0;
void _loadData() {
rootBundle.loadString('assets/data/province.json').then((v) {
List data = json.decode(v);
setState(() {
this.data = data;
this.province = data;
this.city = data[provinceIndex]['children'];
this.area = data[provinceIndex]['children'][cityIndex]['children'];
});
});
}
@override
void initState() {
super.initState();
_loadData();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('省市县三级联动'),
centerTitle: true,
),
body: new Container(
width: double.infinity,
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
FlatButton(onPressed: () {}, child: new Text('取消')),
FlatButton(
onPressed: () {
print(data[provinceIndex]);
print(data[provinceIndex]['children'][cityIndex]);
print(data[provinceIndex]['children'][cityIndex]
['children'][areaIndex]);
},
child: new Text('选择')),
],
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Expanded(
child: new Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Expanded(
flex: 1,
child: new MyPicker(
controller: provinceController,
key: Key('province'),
createWidgetList: () {
return province.map((v) {
return new Text(v['label']);
}).toList();
},
changed: (int index) {
setState(() {
cityController.jumpToItem(0);
areaController.jumpToItem(0);
provinceIndex = index;
cityIndex = 0;
areaIndex = 0;
city = data[provinceIndex]['children'];
area = data[provinceIndex]['children'][cityIndex]
['children'];
});
},
),
),
new Expanded(
flex: 1,
child: new MyPicker(
controller: cityController,
key: Key('city'),
createWidgetList: () {
return city.map((v) {
return new Text(v['label']);
}).toList();
},
changed: (index) {
setState(() {
areaController.jumpToItem(0);
cityIndex = index;
areaIndex = 0;
area = data[provinceIndex]['children'][cityIndex]
['children'];
});
},
),
),
new Expanded(
flex: 1,
child: new MyPicker(
controller: areaController,
key: Key('area'),
createWidgetList: () {
return area.map((v) {
return new Text(v['label']);
}).toList();
},
changed: (index) {
setState(() {
areaIndex = index;
});
},
),
),
],
),
),
],
),
),
);
}
}
class MyPicker extends StatefulWidget {
final CreateWidgetList createWidgetList;
final ValueChanged<int> changed;
final Key key;
final FixedExtentScrollController controller;
MyPicker({this.createWidgetList, this.changed, this.key, this.controller});
@override
State createState() {
return new _MyPickerState();
}
}
class _MyPickerState extends State<MyPicker> {
@override
Widget build(BuildContext context) {
return new Container(
child: new CupertinoPicker(
key: widget.key,
scrollController: widget.controller,
itemExtent: 40.0,
onSelectedItemChanged: (index) {
if (widget.changed != null) {
widget.changed(index);
}
},
children: widget.createWidgetList().length > 0
? widget.createWidgetList()
: [new Text('请选择')],
),
);
}
}
在这个功能开发的过程中遇到了很多问题，最重要的是自己对flutter的状态管理机制理解不到位，在flutter里面，事件的传递是从下往上传递的，数据流是从上下传递的，以后还要多多读读文档。
主要问题：
1、省市区的数据刷新问题。采用父级组件给子组件传递数据的方式。这样，省市刷新的时候可以从父级组件更新子组件数据。
class _MyPickerState extends State<MyPicker> {
@override
Widget build(BuildContext context) {
return new Container(
child: new CupertinoPicker(
key: widget.key,
scrollController: widget.controller,
itemExtent: 40.0,
onSelectedItemChanged: (index) {
if (widget.changed != null) {
widget.changed(index);
}
},
children: widget.createWidgetList().length > 0
? widget.createWidgetList()
: [new Text('请选择')],
),
);
}
}
2、选择之后滚动的状态更新。因为FixedExtentScrollController有自己的状态管理机制,查找源代码，找到了定位滚动到固定位置的办法。
cityController.jumpToItem(0);
areaController.jumpToItem(0);
不完善的地方：
1、数据回调，没有留下选择之后回调的接口，这个后期完善。
2、实用性方面，这个的功能，最好从底部弹出，后期再完善。
3、美观性不足。
废话不多说上代码github地址
PS欢迎大家关注我的简书，相互学习探讨。
