你找不到我之InputDecorator

最近在写一个页面。用的自带的material风格。一点没动。其中有TextField，像这样：

而后我还须要一个下拉列表，Flutter 有一个下拉列表的组件，一个按钮：DropdownButton，像这样：

DropdownButton<String>(
  value: value,
  onChanged: (String newValue) {},
  items: ['R', 'S'].map((key) {
    return DropdownMenuItem(
      value: key,
      child: Text(key == 'R' ? '大众脸' : '网红脸'),
    );
  }).toList(),
);
复制代码

不对啊，这个风格不一致。

先去看DropdownButton的文档，没发现有关于整容的属性，再去翻了一下Material Design 关于下拉列表的那部分，发现有这个设计：

嗯？是 Flutter 没实现仍是个人打开方式不对？

我再回去仔细看了DropdownButton的文档，发现有一个属性有点可疑，由于它的注释写着：

Reduce the button's height. By default this button's height is the same as its menu items' heights. If isDense is true, the button's height is reduced by about half. This can be useful when the button is embedded in a container that adds its own decorations, like InputDecorator.

这个属性是isDense，它的做用是，控制小部件的高度，当为ture时，小部件的高度约为false时的一半，而false时的高度和下拉列表的item的高度是一致的。默认是false。

而后看注释是，若是想要整容，得设置为true。

DropdownButton<String>(
  value: value,
  onChanged: (String newValue) {},
  isDense: true,
  items: ['R', 'S'].map((key) {
    return DropdownMenuItem(
      value: key,
      child: Text(key == 'R' ? '大众脸' : '网红脸'),
    );
  }).toList(),
);
复制代码

接下来，高兴一下，终于找到你了，整容医生InputDecorator！！！

让它给我画几条线先：

InputDecorator(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: '脸',
  ),
  child: DropdownButton<String>(
    value: value,
    onChanged: (String newValue) {},
    isDense: true,
    items: ['R', 'S'].map((key) {
      return DropdownMenuItem(
        value: key,
        child: Text(key == 'R' ? '大众脸' : '网红脸'),
      );
    }).toList(),
  ),
);
复制代码

等下，麻烦把个人胡须剃掉能够吗？

能够，上专用剃须刀DropdownButtonHideUnderline

大功告成！！喜大普奔！！

InputDecorator(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: '脸',
  ),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
      isDense: true,
      value: value,
      onChanged: onChanged,
      items: ['R', 'S'].map((key) {
        return DropdownMenuItem(
          value: key,
          child: Text(key == 'R' ? '大众' : '网红'),
        );
      }).toList(),
    ),
  ),
);
复制代码

嗯。。。。看起来高度不同，算了，就这样。