Flutter 74: 圖解基本 DropdownButton 下拉選項框按鈕

      和尚對于 Flutter 并不系統，總是遇到問題才會準備嘗試，今天和尚準備學習一下下拉選擇框；Android 提供了便利的 Spinner 而 Flutter 對應的是 DropdownButton；

源碼分析

DropdownButton({
    Key key,
    @required this.items,       // 下拉選項清單
    this.selectedItemBuilder,   // 選項 item 構造器
    this.value,                 // 選中内容
    this.hint,                  // 啟動狀态下預設内容
    this.disabledHint,          // 禁用狀态下預設内容
    @required this.onChanged,   // 選擇 item 回調
    this.elevation = 8,         // 陰影高度
    this.style,                 // 選項清單 item 樣式
    this.underline,             // 按鈕下劃線
    this.icon,                  // 下拉按鈕圖示
    this.iconDisabledColor,     // 禁用狀态下圖示顔色
    this.iconEnabledColor,      // 啟動時圖示顔色
    this.iconSize = 24.0,       // 圖示尺寸
    this.isDense = false,       // 是否降低按鈕高度
    this.isExpanded = false,    // 是否将下拉清單内容設定水準填充
})

const DropdownMenuItem({
    Key key,
    this.value,             // 對應選中狀态内容
    @required this.child,   // 下拉清單 item 内容
})           

      分析源碼可知，items 和 onChanged 回調是必須參數，且在不同狀态下，展示的效果不同；其中 items 或 onChanged 為 null 時為禁用狀态，和尚接下來逐一分析各屬性；

案例分析

1. items 為下拉選項清單，onChanged 為選中回調；兩者其中一個為 null 時為按鈕禁用狀态，不可點選，預設下拉 icon 為灰色；items 不為空時，需為相同類型的 DropdownMenuItem 類型清單；

DropdownButton(items: null, onChanged: null);

DropdownButton(items: [
  DropdownMenuItem(child: Text('北京')),
  DropdownMenuItem(child: Text('天津')),
  DropdownMenuItem(child: Text('河北'))
], onChanged: (value) {});           

1. icon 為下拉按鈕右側圖示，iconSize 為下拉按鈕圖示尺寸，禁用和啟動狀态下均可設定；若 icon 設定尺寸以 icon 尺寸為準；

icon: Icon(Icons.arrow_right),
// icon: Icon(Icons.arrow_right, color: Colors.blue.withOpacity(0.7), size: 60),
iconSize: 40,           

1. iconDisabledColor 為禁用狀态下設定 icon 顔色，iconEnabledColor 為按鈕啟用狀态下設定 icon 顔色；但若 icon 設定固定顔色後，以 icon 設定為準；

// 禁用 icon 顔色
iconDisabledColor: Colors.redAccent.withOpacity(0.7),
// 啟用 icon 顔色
iconEnabledColor: Colors.green.withOpacity(0.7),           

1. disabledHint 為禁用狀态下預設展示内容，hint 為按鈕啟用狀态下預設展示内容，采用 hint 時 DropdownMenuItem 中 type 不為空，否則隻會顯示第一條 item；

// 禁用預設内容
disabledHint: Text('暫不可用'),
// 啟用預設内容
DropdownButton(icon: Icon(Icons.arrow_right), iconSize: 40, iconEnabledColor: Colors.green.withOpacity(0.7),
    hint: Text('請選擇地區'),
    items: [
      DropdownMenuItem(child: Text('北京'), value: 1), DropdownMenuItem(child: Text('天津'), value: 2),
      DropdownMenuItem(child: Text('河北'), value: 3)
    ], onChanged: (value) {});           

1. underline 用來設定按鈕下劃線樣式，若設定 null 顯示的是高度為 1.0 的預設下劃線樣式，若需要隐藏下劃線可以設定 Container 高度為 0.0；

underline: Container(height: 4, color: Colors.green.withOpacity(0.7)),
// 隐藏下劃線
underline: Container(height: 0),           

1. isDense 用來調整按鈕高度，true 時将按鈕高度縮小，縮小的高度通過 Theme _kDenseButtonHeight 決定，但不會縮小太多導緻圖示剪切；

// 源碼
double get _denseButtonHeight {
    final double fontSize = _textStyle.fontSize ?? Theme.of(context).textTheme.subhead.fontSize;
    return math.max(fontSize, math.max(widget.iconSize, _kDenseButtonHeight));
}           

1. isExpanded 用于是否填充按鈕寬度到父控件，true 為填充，false 為預設不填充；

// 源碼
if (widget.isExpanded)
    Expanded(child: innerItemsWidget)           

1. elevation 是 z 軸上垂直陰影，隻能是 1 / 2 / 3 / 4 / 6 / 8 / 9 / 12 / 16 / 24，預設陰影高度是 8，若設定其他值不顯示；

//源碼
8: <BoxShadow>[
    BoxShadow(offset: Offset(0.0, 5.0), blurRadius: 5.0, spreadRadius: -3.0, color: _kKeyUmbraOpacity),
    BoxShadow(offset: Offset(0.0, 8.0), blurRadius: 10.0, spreadRadius: 1.0, color: _kKeyPenumbraOpacity),
    BoxShadow(offset: Offset(0.0, 3.0), blurRadius: 14.0, spreadRadius: 2.0, color: _kAmbientShadowOpacity),
],           

1. style 為下拉選項清單中文字樣式；但下拉清單 item 設定文本樣式後，以 item 設定為準；

DropdownButton(style: style,
    icon: Icon(Icons.arrow_right), iconSize: 40, iconEnabledColor: Colors.green.withOpacity(0.7),
    hint: Text('請選擇地區'), isExpanded: true, underline: Container(height: 1, color: Colors.green.withOpacity(0.7)),
    items: [
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('北京'), SizedBox(width: 10), Icon(Icons.ac_unit) ]),
          value: 1),
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('天津'), SizedBox(width: 10), Icon(Icons.content_paste) ]),
          value: 2),
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('河北', style: TextStyle(color: Colors.purpleAccent, fontSize: 16)), SizedBox(width: 10), Icon(Icons.send, color: Colors.purpleAccent) ]),
          value: 3)
    ],
    onChanged:(value) {});           

1. 對于 DropdownButton 選中回調，其中 items 中 value 是必須參數，且不相同；回調傳回的内容是 DropdownMenuItem 中 child 内容；

DropdownButton(
    value: _value, style: style,
    icon: Icon(Icons.arrow_right), iconSize: 40, iconEnabledColor: Colors.green.withOpacity(0.7),
    hint: Text('請選擇地區'), isExpanded: true, underline: Container(height: 1, color: Colors.green.withOpacity(0.7)),
    items: [
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('北京'), SizedBox(width: 10), Icon(Icons.ac_unit) ]),
          value: 1),
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('天津'), SizedBox(width: 10), Icon(Icons.content_paste) ]),
          value: 2),
      DropdownMenuItem(
          child: Row(children: <Widget>[Text('河北', style: TextStyle(color: Colors.purpleAccent, fontSize: 16)), SizedBox(width: 10), Icon(Icons.send, color: Colors.purpleAccent) ]),
          value: 3)
    ],
    onChanged: (value) => setState(() => _value = value));           

DropdownButton 案例源碼

      和尚對 DropdownButton 的嘗試僅限于基本屬性的應用，對于使用 PopupRoute 浮層展示 DropdownMenuItem 清單的源碼層涉及較少；如有錯誤請多多指導！

來源： 阿策小和尚