省市區(qū)三級(jí)聯(lián)動(dòng)，這個(gè)需求在大多說的應(yīng)用中是個(gè)常見的功能，沒事就出來制造個(gè)輪子。
直接上圖，看效果圖
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('省市縣三級(jí)聯(lián)動(dòng)'),
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('請(qǐng)選擇')],
),
);
}
}
在這個(gè)功能開發(fā)的過程中遇到了很多問題，最重要的是自己對(duì)flutter的狀態(tài)管理機(jī)制理解不到位，在flutter里面，事件的傳遞是從下往上傳遞的，數(shù)據(jù)流是從上下傳遞的，以后還要多多讀讀文檔。
主要問題：
1、省市區(qū)的數(shù)據(jù)刷新問題。采用父級(jí)組件給子組件傳遞數(shù)據(jù)的方式。這樣，省市刷新的時(shí)候可以從父級(jí)組件更新子組件數(shù)據(jù)。
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('請(qǐng)選擇')],
),
);
}
}
2、選擇之后滾動(dòng)的狀態(tài)更新。因?yàn)镕ixedExtentScrollController有自己的狀態(tài)管理機(jī)制,查找源代碼，找到了定位滾動(dòng)到固定位置的辦法。
cityController.jumpToItem(0);
areaController.jumpToItem(0);
不完善的地方：
1、數(shù)據(jù)回調(diào)，沒有留下選擇之后回調(diào)的接口，這個(gè)后期完善。
2、實(shí)用性方面，這個(gè)的功能，最好從底部彈出，后期再完善。
3、美觀性不足。
廢話不多說上代碼github地址
PS歡迎大家關(guān)注我的簡(jiǎn)書，相互學(xué)習(xí)探討。
