Question

我正在尝试创建一个包含DropdownButton小部件组件的页面。这是我的代码：

Padding(
  padding: const EdgeInsets.only(
    right: 16.0,
  ),
  child: DropdownButtonHideUnderline(
    child: DropdownButton<String>(
      icon: Icon(
        Icons.more_vert,
      ),
      iconSize: 24,
      elevation: 16,
      style: TextStyle(color: Colors.deepPurple),
      items: <String>['Edit', 'Delete']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (newValue) {},
    ),
  ),
),

一切看起来都很好。

但是，上面的代码在左侧创建了一个不必要的空间，如您在此处看到的那样：

我需要在左侧删除此不必要的空间。有什么想法吗？

Answer 1

我尝试过为您找到最佳答案，当然发现PopupMenuButton flutter是您的最佳选择。

您可以像这样在您的代码中使用它，您的选择非常好。

           Container(
             color: Colors.indigo, // this is for your reference, can be removed
             // here is your padding
             padding: const EdgeInsets.only(left: 0.0, right: 16.0), 
             child: PopupMenuButton<String>(
                itemBuilder: (context) {
                  return <String>["Edit", "Delete"].map((str) {
                    return PopupMenuItem(
                      value: str,
                      child: Text(str),
                    );
                  }).toList();
                },
                child: Icon(Icons.more_vert, color: Colors.white),
                onSelected: (value) {}
              )
           )

结果

Answer 2

如果要删除空格，建议您使用popmenu小部件：

    PopupMenuButton(
        padding: const EdgeInsets.only(left: 0.0, right: 16.0), 
        elevation: 3.2,
        initialValue: choices[1],
        onCanceled: () {
          print('You have not chossed anything');
        },
        tooltip: 'This is tooltip',
        onSelected: _select,
        itemBuilder: (BuildContext context) {
          return choices.map((CustomPopupMenu choice) {
            return PopupMenuItem(
              value: choice,
              child: Text(choice.title),
            );
          }).toList();
        },
      )

如何在不显示所选值的情况下创建下拉按钮

2 个答案: