【Flutter 專題】74 圖解基本 DropdownButton 下拉選項框按鈕｜8月更文挑戰

“這是我參與8月更文挑戰的第14天，活動詳情檢視： 8月更文挑戰” juejin.cn/post/698796…

和尚對於 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 時為禁用狀態，和尚接下來逐一分析各屬性；

案例分析

items 為下拉選項列表，onChanged 為選中回撥；兩者其中一個為 null 時為按鈕禁用狀態，不可點選，預設下拉 icon 為灰色；items 不為空時，需為相同型別的 DropdownMenuItem 型別列表；

DropdownButton(items: null, onChanged: null);

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

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

icon: Icon(Icons.arrow_right),
// icon: Icon(Icons.arrow_right, color: Colors.blue.withOpacity(0.7), size: 60),
iconSize: 40,
複製程式碼

iconDisabledColor 為禁用狀態下設定 icon 顏色，iconEnabledColor 為按鈕啟用狀態下設定 icon 顏色；但若 icon 設定固定顏色後，以 icon 設定為準；

// 禁用 icon 顏色
iconDisabledColor: Colors.redAccent.withOpacity(0.7),
// 啟用 icon 顏色
iconEnabledColor: Colors.green.withOpacity(0.7),
複製程式碼

4. 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) {});
複製程式碼

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

underline: Container(height: 4, color: Colors.green.withOpacity(0.7)),
// 隱藏下劃線
underline: Container(height: 0),
複製程式碼

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));
}
複製程式碼

isExpanded 用於是否填充按鈕寬度到父控制元件，true 為填充，false 為預設不填充；

// 原始碼
if (widget.isExpanded)
    Expanded(child: innerItemsWidget)
複製程式碼

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),
],
複製程式碼

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) {});
複製程式碼

對於 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 列表的原始碼層涉及較少；如有錯誤請多多指導！

來源：阿策小和尚

【Flutter 專題】74 圖解基本 DropdownButton 下拉選項框按鈕｜8月更文挑戰

原始碼分析

案例分析

相關文章