【发布时间】:2020-11-08 02:30:31
【问题描述】:
任何想法如何从 Flutter PopupmenuButton 中删除巨大的填充?诸如shrinkWrap之类的东西,甚至可以使用的替代小部件?它破坏了我元素的对齐方式。
我尝试将padding 设置为 0,但完全没有效果。
padding: EdgeInsets.all(0)
【问题讨论】:
任何想法如何从 Flutter PopupmenuButton 中删除巨大的填充?诸如shrinkWrap之类的东西,甚至可以使用的替代小部件?它破坏了我元素的对齐方式。
我尝试将padding 设置为 0,但完全没有效果。
padding: EdgeInsets.all(0)
【问题讨论】:
提供 child 而不是 icon 将允许您使用具有任何所需大小/填充的自定义小部件。
注意:Icons.more_vert 带有自己的填充,但可以使用任何自定义图标来避免这种情况。
PopupMenuButton(
child: Container(
height: 36,
width: 48,
alignment: Alignment.centerRight,
child: Icon(
Icons.more_vert,
),
),
onSelected: (value) {},
itemBuilder: (context) => [],
),
【讨论】:
解决方法:用 SizedBox 包裹起来:
SizedBox(
height:,
child: Row(
children: [
PopupMenuButton(
)
],
),
)
【讨论】:
提供了解决方案,但您必须编辑非项目文件(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,代码将不再存在。
如果您仔细看到填充不在PopupmenuButton 中,则填充来自IconButton。IconButton 是一个 Material Design 小部件,它遵循可点击对象每边至少需要 48px 的规范。所以最好创建自己的小部件来减少填充。
一个简单的解决方法是使用用GestureDetector包裹的图标。
您可以参考this的帖子了解更多详情。
【讨论】:
来自 Flutter Docs 的 PopopMenuButton 类,
填充 → EdgeInsetsGeometry 默认匹配 IconButton 的 8 dps 内边距。在某些情况下,特别是当此按钮显示为列表项的尾随元素时,能够将填充设置为零很有用。
您可以按照文档的建议将填充更改为 0。
在此处阅读更多信息 - https://api.flutter.dev/flutter/material/PopupMenuButton-class.html
【讨论】: