flutter 如何在抖动中改变下拉按钮的高度

q0qdq0h2  于 2023-11-21  发布在  Flutter
关注(0)|答案(8)|浏览(226)

我怎么能改变一个DropdownButton的高度在Flutter。我试过使用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();
      }
    )
  )
}

字符串

fivyi3re

fivyi3re1#

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

字符串
最终产品应该是这样的,


的数据

yzuktlbb

yzuktlbb2#

看起来DropdownButton类的'itemHeight'属性应该可以做到这一点。我尝试了它,它增加了我的DropdownButton的高度。
下面是我在以前的项目中使用itemHeight的一些示例代码:

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

字符串
注意:只要确保您提供的值不小于48.0,因为它会给予一个错误。
属性:https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html
由“kMinInteractiveHeight”定义的最小itemHeight:https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html

pes8fvy9

pes8fvy93#

itemHeight: null,

字符串
您只需要将itemHeight保留为 null 值。
它将使下拉按钮的高度与菜单项的固有高度相同。

qyuhtwio

qyuhtwio4#

使用SizedBox控件

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

字符串

z9gpfhce

z9gpfhce5#

您需要使用下拉按钮控件的menuMaxHeight属性。

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

字符串

ymzxtsji

ymzxtsji6#

最简单的方法是使用基于DropDownButton构建的DropDownButton2
只需更改buttonHeight属性
不仅仅是buttonHeight,你甚至可以改变itemHeightbuttonwidth和更多的自定义

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,
        ),
      ),
    ),
  );
}

字符串
checkout:DropDownButton2查看更多示例。
希望有帮助!

sg2wtvxw

sg2wtvxw7#

将此属性menuMaxHeight:200添加到DropdownButton

bjg7j2ky

bjg7j2ky8#

我使用InputDecorationTheme来满足需求。

List<int> weekList = List.generate(52, (index) => index + 1);
  int? selectedWeek;

DropdownMenu<int>(
                      inputDecorationTheme: const InputDecorationTheme(
                        contentPadding: EdgeInsets.all(10),
                        constraints: BoxConstraints.expand(height: 40),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                          borderSide: BorderSide(
                            width: 1.2,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                      initialSelection: weekList.first,
                      controller: colorController,
                      menuHeight: 200,
                      label: const Text('Select week'),
                      dropdownMenuEntries: weekList
                          .map(
                            (int item) => DropdownMenuEntry<int>(
                              value: item,
                              label: item.toString(),
                              style: const ButtonStyle(
                                backgroundColor:
                                    MaterialStatePropertyAll(Colors.red),
                              ),
                            ),
                          )
                          .toList(),
                      onSelected: (int? color) {
                        setState(
                          () {
                            selectedWeek = color;
                          },
                        );
                      },
                    ),

字符串

相关问题