你找不到我之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(),
    ),
  ),
);
複製代碼

嗯。。。。看起來高度不同，算了，就這樣。