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

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

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

padding: EdgeInsets.all(0)

【问题讨论】:

    标签: flutter popupmenubutton


    【解决方案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 类,

        填充 → EdgeInsetsGeometry 默认匹配 IconButton 的 8 dps 内边距。在某些情况下,特别是当此按钮显示为列表项的尾随元素时,能够将填充设置为零很有用。

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

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

        【讨论】:

          猜你喜欢
          • 2021-11-19
          • 2021-02-18
          • 1970-01-01
          • 2022-11-15
          • 2021-05-23
          • 1970-01-01
          • 2018-10-27
          • 2012-12-27
          • 1970-01-01
          相关资源
          最近更新 更多