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);
      },
    );
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容