在这个简单的代码示例中,我想通过设置 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时,问题就消失了。所以我将颜色参数设置为透明来观察问题。
我发现高程参数不仅会产生阴影,还会为背景生成灰色蒙版。我是初学者,通过查阅资料、修改主题颜色参数都没有解决问题。
我希望能够摘下这个面具并显示出正确的颜色。
感谢您的关注。
...我发现高程参数不仅会产生阴影,还会为背景生成灰色蒙版。
如果您使用
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'),
),
],
)