从 Flutter PopupMenuButton 中删除填充

Posted 2023-02-23

技术标签:

【中文标题】从 Flutter PopupMenuButton 中删除填充【英文标题】：Remove padding from Flutter PopupMenuButton 【发布时间】：2020-11-08 02:30:31 【问题描述】：

任何想法如何从 Flutter PopupmenuButton 中删除巨大的填充？诸如shrinkWrap之类的东西，甚至可以使用的替代小部件？它破坏了我元素的对齐方式。

我尝试将padding 设置为 0，但完全没有效果。

padding: EdgeInsets.all(0)

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

这个答案有帮助。非常感谢。【参考方案2】：

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

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

【讨论】：

【参考方案3】：

提供了解决方案，但您必须编辑非项目文件（PopupMenuItem 类）

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：不是很推荐，但仍然可以工作

【讨论】：

谢谢。它应该可以工作，但如果其中一位队友执行pub get，代码将不再存在。然后您可以尝试使用它创建自己的小部件。因此，您将拥有自己的 PopMenuItem（已修改）并且 pub get 将无法再影响它。如何找到这个文件并将其复制到我的项目中？【参考方案4】：

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

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

您可以参考this的帖子了解更多详情。

【讨论】：

【参考方案5】：

来自 Flutter Docs 的 PopopMenuButton 类，