如何在Flutter中更改PopupMenuItem的背景颜色?
现在,我只是更改PopupMenuItem的子项的颜色,结果是这样的:
代码如下:
PopupMenuButton<int>(
onSelected: (value) {
// TODO: Implement onSelect
},
offset: Offset(50, 50),
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Container(
height: double.infinity,
width: double.infinity,
color: Colors.greenAccent, // i use this to change the bgColor color right now
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.check),
SizedBox(width: 10.0),
Text("Konfirmasi Update"),
SizedBox(width: 10.0),
],
),
),
),
我想要的是更改“ Konfirmasi Update”选项的背景颜色,因为您可以在上方的图片中看到该颜色在该选项之外留有白色区域。
如何完全更改PopupMenuItem的背景色,而又不将PopupMenuItem的外部留在白色区域?
答案 0 :(得分:2)
无法使用开箱即用的PopupMenuButton
和PopupMenuItem
小部件,因为如果您检查源代码,则会有用于垂直和水平填充的硬代码值。
我修改了popup_menu.dart
文件的代码,特别是这些值:
const double _kMenuVerticalPadding = 0.0;//8.0;
const double _kMenuHorizontalPadding = 0.0;//16.0;
如果要使其正常运行,请将此文件下载到您的项目中:https://gist.github.com/diegoveloper/995f1e03ef225edc64e06525dc024b01
将该文件导入您的项目并添加别名:
import 'your_project/my_popup_menu.dart' as mypopup;
用法:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: mypopup.PopupMenuButton<int>(
elevation: 20,
onSelected: (value) {
// TODO: Implement onSelect
},
offset: Offset(50, 50),
itemBuilder: (context) => [
mypopup.PopupMenuItem(
value: 1,
child: Container(
height: double.infinity,
width: double.infinity,
color: Colors
.greenAccent, // i use this to change the bgColor color right now
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.check),
SizedBox(width: 10.0),
Text("Konfirmasi Update"),
SizedBox(width: 10.0),
],
),
),
),
mypopup.PopupMenuItem(
value: 1,
child: Container(
height: double.infinity,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.check),
SizedBox(width: 10.0),
Text("Revisi Update"),
SizedBox(width: 10.0),
],
),
),
),
],
),
),
);
}
结果
答案 1 :(得分:1)
另一种选择是从 PopupMenuItem 继承。
仅使用更改 CustomPopupMenuItem 的 PopupMenuButton 并设置颜色。
import 'package:flutter/material.dart';
class CustomPopupMenuItem<T> extends PopupMenuItem<T> {
final Color color;
const CustomPopupMenuItem({
Key key,
T value,
bool enabled = true,
Widget child,
this.color,
}) : super(key: key, value: value, enabled: enabled, child: child);
@override
_CustomPopupMenuItemState<T> createState() => _CustomPopupMenuItemState<T>();
}
class _CustomPopupMenuItemState<T> extends PopupMenuItemState<T, CustomPopupMenuItem<T>> {
@override
Widget build(BuildContext context) {
return Container(
child: super.build(context),
color: widget.color,
);
}
}
答案 2 :(得分:0)
您可以将PopupMenuButton放在一个主题中,在您的主题中,您必须为所需的背景色更新cardColor,如下所示:
Center(
child: Theme(
data: Theme.of(context).copyWith(
cardColor: Colors.greenAccent,
),
child: PopupMenuButton<int>(
onSelected: (value) {
},
offset: Offset(50, 50),
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Container(
height: double.infinity,
width: double.infinity,
color: Colors.greenAccent, // i use this to change the bgColor color right now
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.check),
SizedBox(width: 10.0),
Text("Konfirmasi Update"),
SizedBox(width: 10.0),
],
),
),
)
]
)
)
)
答案 3 :(得分:0)
更改整个菜单或其子菜单的颜色非常容易。
使用正则颜色表达式。 颜色:Colors.red 或您喜欢的任何颜色。
您可以在 catch
或 PopupMenuButton()
中使用它。