从 Flutter PopupMenuButton 中删除填充

Question

知道如何从 Flutter PopupmenuButton 中删除巨大的填充吗？像 shrinkWrap 或什至可以使用的替代小部件之类的东西？它破坏了我的元素的对齐方式。

我尝试将 padding 设置为 0 但一点效果都没有。

padding: EdgeInsets.all(0)

Answer 1

来自 PopopMenuButton 的 Flutter 文档 class，

padding → EdgeInsetsGeometry Matches IconButton's 8 dps padding by default. In some cases, notably where this button appears as the trailing element of a list item, it's useful to be able to set the padding to zero.

您可以按照文档的建议将填充更改为 0。

在此处阅读更多内容 - https://api.flutter.dev/flutter/material/PopupMenuButton-class.html

Answer 2

如果您仔细观察填充不在 PopupmenuButton 中，则填充来自 IconButton。IconButton 是一个 Material 设计小部件，它遵循可点击对象的规范每边至少需要 48px。所以最好创建自己的小部件以减少填充。

避免它的一个简单解决方法是使用用 GestureDetector 包裹的图标。

详情可参考post

Answer 3

已提供解决方案，但您必须编辑非项目文件 (PopupMenuItem class)

return InkWell(
      onTap: widget.enabled ? handleTap : null,
      child: Container(
        height: widget.height,
        padding: const EdgeInsets.symmetric(horizontal: _kHorizontalMenuPadding), // setting this to 0 worked 
        child: item,
      ),
    );

P.S：不推荐但仍然有效

Answer 4

解决方法：用SizedBox包裹起来：

SizedBox(
  height:,
  child: Row(
    children: [
      PopupMenuButton(        
      )
    ],
  ),
)

Answer 5

提供 child 而不是 icon 将允许您使用具有任何所需的自定义小部件 size/padding。

注意：Icons.more_vert 带有自己的填充，但可以使用任何自定义图标来避免这种情况。

PopupMenuButton(
  child: Container(
    height: 36,
    width: 48,
    alignment: Alignment.centerRight,
    child: Icon(
      Icons.more_vert,
    ),
  ),
  onSelected: (value) {},
  itemBuilder: (context) => [],
),

Answer 6

要从 PopUpMenu Button 中删除 Padding，将其包装到 Container 中并根据需要提供宽度。

Container(
  width:20,
  child: PopupMenuButton( 
       // your Code is Here       
      ),
  )

从 Flutter PopupMenuButton 中删除填充

Remove padding from Flutter PopupMenuButton

flutter

popupmenubutton