如何在颤动中更改 DropdownButton 的高度答案

【问题标题】：How to change height of DropdownButton in flutter如何在颤动中更改 DropdownButton 的高度
【发布时间】：2020-12-29 02:34:25
【问题描述】：

如何在 Flutter 中更改 DropdownButton 的高度。我曾尝试使用 Padding 和 SizedBox，但没有一个真正起作用。

SizedBox 只是增加了容器的大小，而 DropdownButton 被夹在左上角，因此不再居中。填充被忽略或将内容移到按钮之外。

我不想更改下拉覆盖的大小，而是更改按钮本身。


build(BuildContext context) {
  return ThemeData(
    data: ThemeData(canvasColor: Colors.white),
    child: DropdownButton(
      items: _items.map((item) => DropdownMenuItem(child: Text(item), value: item)).toList(),
      isExpanded: true,
      selectedItemBuilder: (_) {
        return _items.map<Widget>((String lang) {
          return Center(
            widthFactor: 1,
            child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text(lang, style: TextStyle(color: Colors.black))
            ),
          );
        }).toList();
      }
    )
  )
}

【问题讨论】：

标签： flutter dropdownbutton

【解决方案1】：

将其包裹在Container 中，根据您的需要指定高度、宽度并在DropDownButton 中设置isExpanded true。还可以根据需要更改下拉按钮文本字体大小。

Container(
  height: 50.0,
  width: 200.0,
  child: DropdownButton(
           value: dropdownValue,
           icon: Icon(Icons.arrow_downward),
           iconSize: 24,
           elevation: 16,
           isExpanded: true,
           style: TextStyle(color: Colors.deepPurple, fontSize: 20.0),
           underline: Container(
             height: 2,
             color: Colors.deepPurpleAccent,
           ),
           onChanged: (String newValue) {
             setState(() {
               dropdownValue = newValue;
             });
           },
           items: <String>['One', 'Two', 'Free', 'Four']
               .map<DropdownMenuItem<String>>((String value) {
             return DropdownMenuItem<String>(
               value: value,
               child: Text(value),
             );
           }).toList(),
         )
)

最终产品应该看起来像这样，

【讨论】：

【解决方案2】：

看起来 DropdownButton 类的“itemHeight”属性应该可以解决问题。我试过了，它增加了我的 DropdownButton 的高度。

这是我在以前的项目中使用 itemHeight 获得的一些示例代码：

DropdownButton<String>(
      itemHeight: 100.0,
      value: selectedCurrency,
      items: dropdownItems,
      onChanged: (value) {
        setState(() {
          selectedCurrency = value;
          getData();
        });
      },
    );

注意：请确保您提供的值不小于 48.0，因为它会报错。

文档： itemHeight 属性：https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html

“kMinInteractiveDimension”定义的最小 itemHeight： https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html

【讨论】：

【解决方案3】：

使用 SizedBox 小部件

SizedBox(
      height: 30,
      child:DropdownButton<String>(
      value: selectedCurrency,
      items: dropdownItems,
      onChanged: (value) {},
    ))

【讨论】：

【解决方案4】：

itemHeight: null,

您只需将 itemHeight 保留为 null 值。

它将使 DropdownButton 的高度与菜单项的固有高度一致。

【讨论】：