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

Posted 2023-02-23

【中文标题】我们如何在下拉菜单中更改 Flutter DropdownMenuItem 的宽度/填充？

【英文标题】：How can we change the width/padding of a Flutter DropdownMenuItem in a Dropdown?

【发布时间】：2018-07-31 09:38:22

【问题描述】：

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

【参考方案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,
         ),
      ),
    ),
);

【讨论】：

是否可以设置DropDown Button的高度。

@ShangariC 是的，我想你可以使用padding。

现在打开的下拉菜单与按钮的总大小匹配，但文本本身不对齐，似乎是每个项目中的填充导致问题。如何删除个人选择的填充？如果我直接将它添加到项目中，它还会向选定的（按钮项目）添加填充

【参考方案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,
      ),
    ),
);

【讨论】：

没有帮助我。

填充呢？

在控制台中显示错误 - 不幸的是，此时此对象的几何形状未知，可能是因为它从未布局过。这意味着它不能被准确地命中测试。 E/flutter (22476)：如果您尝试在布局阶段本身执行命中测试，请确保您只命中已完成布局的测试节点（例如，在调用其 layout() 方法之后节点的子节点）。

【参考方案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;
        );
    ,
),