如何在Flutter中更改下拉菜单中DropdownMenuItem的宽度/填充？

Question

在Flutter中，我可以使用DropdownMenuItems构建下拉菜单，例如： 我添加的DropdownMenuItems总是比下拉菜单本身宽： 如何调整DropdownMenuItem的宽度或删除额外的水平填充？

我的DropdownMenuItem部件如下所示：

DropdownMenuItem(
    value: unit.name,
    child: Text('hey'),
);

而我的下拉式菜单小部件则长这样：

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        value: name,
        items: listOfDropdownMenuItems,
        onChanged: onChanged,
        style: Theme.of(context).textTheme.title,
      ),
    ),
);

- Mary

Answer 1

已经添加了此功能。请参见https://github.com/flutter/flutter/pull/14849

现在您可以将其包装在ButtonTheme中，并将alignedDropdown设置为true。

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
          child: DropdownButton(
            value: name,
            items: listOfDropdownMenuItems,
            onChanged: onChanged,
            style: Theme.of(context).textTheme.title,
         ),
      ),
    ),
);

- Mary

---

可以设置下拉按钮的高度吗？ - Shangari C

@ShangariC 是的，我认为你可以使用“padding”。 - Tony

现在打开的下拉菜单与按钮匹配，总大小相同，但文本本身不对齐，似乎每个项目中的填充引起了问题。我该如何删除各个选项上的填充？如果我直接将其添加到项目中，它也会向所选内容（按钮项）添加填充。 - shababhsiddique

这个提出的解决方案会产生一个新问题，下拉标签文本不再像现在一样对齐，而是缩进了。 - mister_cool_beans

Answer 2

我通过将isExpanded更改为true来解决了这个问题;

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isExpanded: true,
        value: name,
        items: listOfDropdownMenuItems,
        onChanged: onChanged,
        style: Theme.of(context).textTheme.title,
      ),
    ),
);

- Mehmet Ali Bayram

---

没有帮助到我。 - atereshkov

填充怎么样？ - Yudhishthir Singh

控制台显示错误 - 很遗憾，此对象的几何结构目前不可知，可能是因为它从未进行过布局。这意味着它无法进行精确的命中测试。 E / flutter（22476）：如果您正在尝试在布局阶段本身执行命中测试，请确保仅对已完成布局的节点进行命中测试（例如节点的子项，在调用其layout（）方法后）。 - Kamlesh

Answer 3

isExpanded: true会将宽度拉伸至全屏。但如果您想要一个自定义的下拉菜单，请查看我的customdropdown.dart。

import 'package:flutter/material.dart';
class CustomDropDown extends StatelessWidget {
  final value;
  final List<String> itemsList;
  final Color dropdownColor;
  final Function(dynamic value) onChanged;
  const CustomDropDown({
    @required this.value,
    @required this.itemsList,
    this.dropdownColor,
    @required this.onChanged,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 20, top: 3, bottom: 3, right: 20),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: DropdownButtonHideUnderline(
          child: Padding(
            padding: const EdgeInsets.only(left: 14.0, right: 14),
            child: DropdownButton(
              isExpanded: true,
              dropdownColor: dropdownColor,
              value: value,
              items: itemsList
                  .map((String item) => DropdownMenuItem<String>(
                        value: item,
                        child: Text(item),
                      ))
                  .toList(),
              onChanged: (value) => onChanged(value),
            ),
          ),
        ),
      ),
    );
  }
}

现在你可以像这样调用它。

现在你可以像这样调用它。

CustomDropDown(
   value: selectedValue,
   itemsList: ['Music', 'Photographer'],
   onChanged: (value) {
        setState(() {
            selectedValue = value;
        });
    },
),

- Abdullah Khan

Answer 4

在我的情况下，这个是有效的。

                  Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: ContactColors.hint2, width: 2)),
                    width: double.infinity,
                    margin: const EdgeInsets.all(5),
                    child: DropdownButtonHideUnderline(
                        child: DropdownButton<String>(
                      hint: new Text("Select City"),
                      isExpanded: true,
                      alignment: Alignment.center,
                      value: dropdownValue,
                      icon: const Icon(Icons.arrow_downward),
                      elevation: 16,
                      style: const TextStyle(color: ContactColors.white),
                      onChanged: (String? value) {
                        // This is called when the user selects an item.
                        setState(() {
                          dropdownValue = value!;
                        });
                      },
                      items: list
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Container(
                            margin: const EdgeInsets.all(10),
                            child: Text(value,
                                style: const TextStyle(
                                    color: ContactColors.primaryColor)),
                          ),
                        );
                      }).toList(),
                    )),
                  ),

- Muhaiminur Rahman

Answer 5

我通过添加isExpanded: true，然后将下拉框包装到一个容器中，再将其包装到填充小部件中来解决了这个问题。

代码：-

Container(
                        height: 60,
                        width: double.infinity,
                         decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: borderContainerColor, width: 3)),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0), //here include this to get padding
                          child: DropdownButton(

                            isExpanded: true,
                            underline: Container(),

                            alignment: Alignment.bottomCenter,


                            elevation: 0,
                            borderRadius: BorderRadius.circular(5 ),
                            value: dropdownvalue,
                            icon: const Icon(Icons.keyboard_arrow_down),

                            items: items.map((String items) {
                              return DropdownMenuItem(
                                value: items,
                                child: Text(items),
                              );
                            }).toList(),
                            onChanged: (String? newValue) {
                              setState(() {
                                dropdownvalue = newValue!;
                              });
                            },
                          ),
                        ),
                      ),

- ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Answer 6

尝试使用此参数 isDense，它会缩小小部件并去除额外的填充，就像这样。

DropdownButton(
          isDense: true,
          value : lname_listValue,
          items: casteEDList.map((String items)
                   {
                       return DropdownMenuItem(
                              value: items,
                              child: Text(items),);
                   }).toList(),
                   onChanged: (String? newValue) {
                              setState(() {
                              lname_listValue = newValue!;
                              },);
                   },
  ),

- Vismay Viradiya

---

什么都没做 - parkorian