Flutter中PopupMenuButton的Offset X轴偏移异常问题

问题根源 #

PopupMenuButton 默认的 alignment 属性是 Alignment.centerRight，弹窗的定位原点是按钮组件的右中位置。当你设置X轴正偏移值时，弹窗会从这个右中位置继续向右偏移，而你的ListTile是占满父容器宽度的，所以视觉上弹窗就会固定在ListTile的末尾。Y轴偏移不受影响是因为Y轴的原点始终是按钮的垂直中心，正偏移会向下移动，符合预期。

解决方法 #

修改PopupMenuButton的alignment属性，将定位原点改为你需要的位置（比如Alignment.centerLeft，对应按钮的左中位置），这样X轴的偏移就会基于这个新原点计算，就能实现自定义定位。

修改后的代码示例 #

在你的CreateMenuWidget的PopupMenuButton中添加alignment配置：

return PopupMenuButton<int>(
  color: Colors.grey[100],
  alignment: Alignment.centerLeft, // 修改定位原点为左中位置
  offset: const Offset(25, 100), // X轴25对应图标容器宽度的一半（50/2），让弹窗对齐图标下方
  constraints: BoxConstraints(
    minWidth: 200,
  ),
  itemBuilder: _itemList,
  onSelected: _onSeleted,
  child: ListTile(
    // 原有child代码不变
  ),
);

额外说明 #

如果需要更精确的定位，你可以根据_containerWidth动态计算X轴偏移值，比如：

offset: Offset(_containerWidth / 2, 100),

这样不管图标容器宽度怎么变，弹窗都会对齐图标的正下方。

内容的提问来源于stack exchange，提问作者Kevin Yang