flutter 下拉选择的使用

这里的下拉选择器使用的库是 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);
      },
    );
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容