如何在颤动中更改下拉按钮的高度

Question

如何在颤动中更改 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

看起来 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 2

itemHeight: null,

您只需将 itemHeight 保留为null值即可。

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

Answer 3

使用 SizedBox 小部件

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

Answer 4

将其包裹在 a 中Container，根据您的需要给出高度和宽度，并isExpanded在DropDownButton. 还可以根据需要更改下拉按钮文本字体大小。

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 5

您需要使用DropdownButton Widget 的menuMaxHeight属性。

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