Flutter：如何最小化 DropdownButton 的寬度

Question

Flutter 中的DropdownButton根據其擁有的項目中最大的DropdownMenuItem設置其寬度。 如果選擇了一個小項目，則在項目和箭頭之間留下很多空白。 如何使按鈕縮放以適合所選項目的寬度？

我嘗試使用Expanded和一些Flexible的東西，但我仍然無法改變它的寬度。

DropdownButton(
    value: null,
    hint: Text("Small text"),
    items: ..., //Text widgets that have more text and are larger than the hint
)

我試圖擺脫hint和箭頭之間帶下划線的空間：

Answer 1

用ButtonTheme包裝 Dropdown 按鈕並添加alignedDropdown = true ，如：

ButtonTheme(
  alignedDropdown: true,
  child: DropdownButton(...),
)

alignedDropdown 將菜單項的寬度與按鈕相匹配。 然后我們需要特定的寬度，所以用 SizedBox 或 Container 包裹 ButtonTheme：

SizedBox(
  width: 25, // Your width for dropdowns
  child: ButtonTheme(...),
)

Answer 2

您可以嘗試將其包裝在ButtonTheme中並設置alignedDropdown: true

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
          child: DropdownButton(
            value: null,
            hint: Text("Small text"),
            items: ..., //Text widgets that have more text and are larger than the hint
            onChanged: onChanged,
            style: Theme.of(context).textTheme.title,
         ),
      ),
    ),
);

Answer 3

這有效：

new Container(
            padding: const EdgeInsets.fromLTRB(10.0, 5, 10, 0),
            child: new Container(
              padding: const EdgeInsets.fromLTRB(10, 5, 5, 5),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(5.0),
                      bottomLeft: const Radius.circular(5.0),
                      bottomRight: const Radius.circular(5.0),
                      topRight: const Radius.circular(5.0))),
              child: new Center(
                  child: new Column(children: [
                new DropdownButton(
                  underline: Text(''),
                  icon: Icon(Icons.keyboard_arrow_down),
                  hint: new Text('Small text'),
                  style: TextStyle(
                    color: Colors.white30,
                  ),
                  isExpanded: true,
                  value: _selectedLocation,
                  onChanged: (String newValue) {
                    setState(() {
                      _selectedLocation = newValue;
                    });
                  },
                  items: _locations.map((String location) {
                    return new DropdownMenuItem<String>(
                      value: location,
                      child: new Text(
                        location,
                        style: TextStyle(
                            color: myColour, fontWeight: FontWeight.bold),
                      ),
                    );
                  }).toList(),
                ),
              ])),
            ))

Answer 4

如果我正確理解了您的問題，那么我也遇到了它並且我有解決方案。 只需將 Wrap 小部件作為 DropdownButton 的父級即可。 它將使下拉菜單環繞到值的大小（但不確定它會如何與空值反應）

Wrap(children: <Widget>[DropdownButton(
value: null,
hint: Text("Small text"),
items: //Text widgets that have more text and are larger than the hint
)])

Answer 5

到目前為止，我能夠做到的方式是限制下拉列表中項目的寬度。

Answer 6

寬度實際上由 selectedItemBuilder 參數提供的最寬項目確定（如果未定義，則使用項目）。 通過這個小技巧，我設法讓它工作：

    DropdownButton<T>(
      value: value,
      selectedItemBuilder: (ctx) => [for (final item in items) value], 
      items: items,
      onChanged: (value) => ... update value

示例中的 selectedItemBuilder 生成重復項的列表（與所選值對應的項）。 您將需要一個有狀態的小部件來處理該值。

Answer 7

使用 DropdownButtonHideUnderline 刪除下線變形 Dropdown

Answer 8

我設法通過定義alignment: Alignment.centerRight來刪除空格。 默認情況下，alignment 設置為Alignment.centerStart ，這會強制文本對齊開始，而圖標設置為對齊結束。 因此，通過將文本居中對齊，它會填充出現在文本和圖標之間的空白區域。 完整代碼示例：

DropdownButton(
    alignment: Alignment.centerRight,
    child: .....
     )