PopupMenuButton背景颜色无法正确设置的问题求助

当你给PopupMenuButton设置elevation且背景色为纯白色时，出现的灰色遮罩是**Material 3中的surface tint（表面色调）**效果——这个效果会根据组件的elevation叠加一层半透明的主题色调，用来增强层次感，但在纯白色背景下会显得违和。

以下是几种可行的解决方式：

方法1：直接关闭surface tint #

在PopupMenuButton中添加surfaceTintColor参数并设置为透明，就能移除这个灰色遮罩，同时保留elevation的阴影效果：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('PopupMenuButton Example'),
        ),
        body: Center(
          child: PopupMenuButton<String>(
            color: Colors.white,
            // 新增：关闭surface tint
            surfaceTintColor: Colors.transparent,
            onSelected: (String result) {
              print('You selected: $result');
            },
            elevation: 8,
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'option1',
                child: Text('Option 1'),
              ),
              const PopupMenuItem<String>(
                value: 'option2',
                child: Text('Option 2'),
              ),
              const PopupMenuItem<String>(
                value: 'option3',
                child: Text('Option 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方法2：局部覆盖Theme #

如果需要更灵活的局部控制，可以用Theme组件包裹PopupMenuButton，单独修改其主题配置：

Theme(
  data: Theme.of(context).copyWith(
    popupMenuTheme: PopupMenuThemeData(
      surfaceTintColor: Colors.transparent,
    ),
  ),
  child: PopupMenuButton<String>(
    color: Colors.white,
    elevation: 8,
    onSelected: (String result) {
      print('You selected: $result');
    },
    itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
      const PopupMenuItem<String>(value: 'option1', child: Text('Option 1')),
      const PopupMenuItem<String>(value: 'option2', child: Text('Option 2')),
      const PopupMenuItem<String>(value: 'option3', child: Text('Option 3')),
    ],
  ),
)

方法3：全局修改主题（可选） #

如果希望整个应用的PopupMenu都移除这个效果，可以在MaterialApp的全局主题中配置：

MaterialApp(
  theme: ThemeData(
    popupMenuTheme: PopupMenuThemeData(
      surfaceTintColor: Colors.transparent,
    ),
  ),
  home: Scaffold(/* 页面内容 */),
)

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