Flutter中SubmenuButton子组件无法居中问题求助

在使用Flutter的SubmenuButton组件时，给ButtonStyle设置Alignment.center无法让子组件（如示例中的Icon）居中，这并非Bug，而是组件内部布局逻辑导致的。

原因分析 #

SubmenuButton的内部布局由_SubmenuButtonLayout实现，这个布局会优先根据菜单的弹出方向（默认向下）调整子组件位置，目的是让子组件与弹出菜单的触发区域视觉上更连贯，因此会忽略ButtonStyle中设置的alignment参数。

解决方法 #

有两种简单方式可以实现子组件居中：

• 使用childAlignment参数：SubmenuButton提供了专门控制子组件对齐的childAlignment参数，优先级高于ButtonStyle的设置，直接配置即可：

SubmenuButton(
  childAlignment: Alignment.center,
  style: ButtonStyle(
    backgroundColor: MaterialStatePropertyAll(Colors.blue),
  ),
  menuStyle: MenuStyle(alignment: Alignment.centerRight),
  menuChildren: [
    MenuItemButton(child: Text("submenu one")),
    MenuItemButton(child: Text("submenu two")),
    MenuItemButton(child: Text("submenu three")),
  ],
  child: Icon(Icons.star),
)

• 用Center包裹子组件：直接将子元素放在Center组件内，强制实现居中效果：

SubmenuButton(
  style: ButtonStyle(
    backgroundColor: MaterialStatePropertyAll(Colors.blue),
  ),
  menuStyle: MenuStyle(alignment: Alignment.centerRight),
  menuChildren: [
    MenuItemButton(child: Text("submenu one")),
    MenuItemButton(child: Text("submenu two")),
    MenuItemButton(child: Text("submenu three")),
  ],
  child: Center(child: Icon(Icons.star)),
)

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