首页 > 解决方案 > 如何在颤动中更改 DropdownButton 的高度

问题描述

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

标签: flutterdropdownbutton

解决方案


将其包裹在 aContainer中,根据您的需要给出高度、宽度并isExpandedDropDownButton. 还可以根据需要更改下拉按钮文本字体大小。

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

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

在此处输入图像描述


推荐阅读