如何更改 flutter 中 DropdownButton 的高度

Question

如何更改 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();
      }
    )
  )
}

Answer 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(),
         )
)

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

Answer 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

Answer 3

使用 SizedBox 小部件

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

Answer 4

itemHeight: null,

您只需将 itemHeight 保留为null值。

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

Answer 5

所有方法中最简单的方法是使用基于DropDownButton2构建的 DropDownButton2

只需更改buttonHeight属性

不只是buttonHeight ，您甚至可以更改itemHeight 、 buttonwidth和更多自定义

String? selectedValue;
List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(,
          items: items
                  .map((item) =>
                  DropdownMenuItem<String>(
                    value: item,
                    child: Text(
                      item,
                     ),
                  ))
                  .toList(),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
            });
          },
          buttonHeight: 40,
          buttonWidth: 140,
          itemHeight: 40,
        ),
      ),
    ),
  );
}

结帐： DropDownButton2以获取更多示例。

希望能帮助到你 ！！

Answer 6

您需要使用 DropdownButton 小部件的menuMaxHeight属性。

child: DropdownButton(
 menuMaxHeight: 500.0,
 value: '1',
 items: setTotalPages(),
 onChanged: (String? newValue) {
 setState(() {
 dropdownvalue = newValue!;
 });
},

)

Answer 7

将此属性 menuMaxHeight: 200, 添加到 DropdownButton