Flutter DropdownButton简单使用及魔改源码

我们一般在写业务的时候多会用到下拉菜单，

前面讲过 ExpansionPanel， ExpansionPanel大部分情况用来实现展开列表等稍微复杂的业务逻辑。

而 DropdownButton 则是用来实现稍微简单一点的 点击选择 业务场景。

简单上手

按照惯例我们查看一下官方文档上的说明：

A material design button for selecting from a list of items.

用于从 item 列表中进行选择的 material 按钮。

说明的下方就是一大段的 demo，我们先来看一下效果：

没错，不要怀疑，One, Two, Free, Four，这就是官方 demo 上写的。

代码如下：

String dropdownValue = 'One';	
	
// ...	
	
Widget build(BuildContext context) {	
  return Scaffold(	
    body: Center(	
      child: DropdownButton<String>(	
        value: dropdownValue,	
        onChanged: (String newValue) {	
          setState(() {	
            dropdownValue = newValue;	
          });	
        },	
        items: <String>['One', 'Two', 'Free', 'Four']	
          .map<DropdownMenuItem<String>>((String value) {	
            return DropdownMenuItem<String>(	
              value: value,	
              child: Text(value),	
            );	
          })	
          .toList(),	
      ),	
    ),	
  );	
}

这样就简单的实现了上图的效果，现在先来看一下他的构造函数。

构造函数

构造函数代码如下：

DropdownButton({	
  Key key,	
  @required this.items,	
  this.value,	
  this.hint,	
  this.disabledHint,	
  @required this.onChang