这里的下拉选择器使用的库是 flutter_picker 版本是^2.0.1
pubspec.yaml中配置该库
dependencies:
flutter:
sdk: flutter
flutter_picker: ^2.0.1
先讲一下选择器适配器的格式如下
//选择器适配器,用于提供数据和生成小部件
adapter: PickerDataAdapter<String>(data: [
new PickerItem(text: Text('江苏'), value: '0', children: [
PickerItem(
text: Text('无锡'),
value:'01',
children:[
PickerItem(text: Text('惠山'),value:'03'),
PickerItem(text: Text('滨湖'),value:'04')
]),
PickerItem(text: Text('苏州'),value:'1'),
]),
PickerItem(text: Text('四川'), value: '1', children: [
PickerItem(
text: Text('达州'),
value:'01',
),
PickerItem(text: Text('巴中'),value:'1'),
])
])
上面这个适配器的写法看起来比较糟糕,数据少还可以一个一个的写下去,一旦多了不可能一个个去写,而是需要将给出的数据遍历生成上面的这种格式
这里的是我的一个home.dart
参考下面的数据数据处理,去生成相对应的数据适配器
import 'package:flutter/material.dart';
//引入flutter_picker插件
import 'package:flutter_picker/Picker.dart';
//假设后台给出的下拉数据格式如下
const PickerData = [
{
'label': '江苏',
'value': '0',
'children': [
{
'label': '无锡',
'value': '01',
'children': [
{'label': '惠山', 'value': '03'},
{'label': '滨湖', 'value': '04'}
]
},
{'label': '苏州', 'value': '02'}
]
},
{
'label': '四川',
'value': '1',
'children': [
{'label': '达州', 'value': '11'},
{'label': '巴中', 'value': '12'}
]
}
];
/**
定义一个方法遍历生成adapter(数据适配器)
data:后台给出的下拉的下拉数据
label:默认值为'label',下拉显示的数据
value:默认值为'value',下拉选择后传给后端的数据
children:下拉二级或者更多集合的字段,默认为'children';
**/
//声明返回的类型为 List对象
List getData(List data,
{String label = 'label',
String value = 'value',
String children = 'children'}) {
//遍历生成相对应的PickerItem
List<PickerItem> list = data.map((item) {
//pickerItem的类型为PickerItem<String> 不指明类型会报错
PickerItem<String> pickerItem = PickerItem(
text: Text(item[label]),
value: item[value],
//如果子项有数据就递归,否则子项的children就是空List
children: item.containsKey(children) && item[children].length > 0
? getData(item[children])
: []);
//最终把遍历的每一项返出去
return pickerItem;
}).toList();
return list;
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body: myHome(),
),
);
}
}
class myHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
print(getData(PickerData));
return RaisedButton(
child: Text('选择器'),
onPressed: () {
new Picker(
//选择器适配器,用于提供数据和生成小部件
//适配器中的data类型为PickerItem<String>,所以在getData中我们有声明其类型
adapter: PickerDataAdapter<String>(data: getData(PickerData)),
//当上一级选择更改时,将子级滚动到第一项
changeToFirst: true,
//是否隐藏头部
hideHeader: false,
title: Text('选择省份'),
confirmText: "确认",
cancelText: "取消",
onConfirm: (Picker picker, List value) {
// print(value.toString());
print(picker.adapter.text);
}).showModal(context);
},
);
}
}