PopupMenuDivider 颜色无法正确设置

Question

在这个简单的代码示例中，我想通过设置 PopupMenuButton 的颜色参数来更改菜单的背景颜色。但是，我发现它的颜色显示不正确。

我的代码：

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,
            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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

当我将颜色设置为白色时(https://i.sstatic.net/82cJ0dPT.png)

当我将颜色设置为白色时(https://i.sstatic.net/19VtZLs3.png)

我发现问题不在于颜色设置。当我将高程参数设置为0时，问题就消失了。所以我将颜色参数设置为透明来观察问题。

我发现高程参数不仅会产生阴影，还会为背景生成灰色蒙版。我是初学者，通过查阅资料、修改主题颜色参数都没有解决问题。

我希望能够摘下这个面具并显示出正确的颜色。

感谢您的关注。

Answer 1

...我发现高程参数不仅会产生阴影，还会为背景生成灰色蒙版。

如果您使用

elevation

，那就是有意的。除了 PopupMenu 的

color

之外，您还希望设置

surfaceTintColor

:

用作颜色叠加以指示海拔的颜色。

PopupMenuButton<String>(
            surfaceTintColor: Colors.white, // --> Set this to white
            color: Colors.white,
            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'),
              ),
            ],
          )