Flutter 如何在颤振中更改PopupMenuItem的背景色

如何在颤振中更改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),
                ],
              ),
            ),
          ),

弹出菜单按钮(
onSelected:（值）{
//TODO:实现onSelect
},
偏移量：偏移量（50,50），
itemBuilder：（上下文）=>[
PopupMenuItem(
价值：1，
子：容器(
高度：双无限，
宽度：double.infinity，
color:Colors.greenAccent，//我现在用它来更改bgColor颜色
孩子：排(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
图标（图标。检查），
尺寸箱（宽度：10.0），
文本（“Konfirmasi更新”），
尺寸箱（宽度：10.0），
],
),
),
),

我想要的是改变“Konfirmasi更新”选项的背景色，正如您在上面的图片上看到的，颜色在选项外留下白色区域

---

如何完全更改PopupMenuItem背景色，而不保留PopupMenuItem外部的白色区域？

您可以将PopupMenuItem按钮放在主题内，在主题中，您必须更新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),
                        ],
                      ),
                    ),
                  )
                ]
            )
        )
    )

中心(
儿童：主题(
数据：Theme.of（context）.copyWith(
cardColor:Colors.greenAccent，
),
孩子：弹出菜单按钮(
onSelected:（值）{
},
偏移量：偏移量（50,50），
itemBuilder：（上下文）=>[
PopupMenuItem(
价值：1，
子：容器(
高度：双无限，
宽度：double.infinity，
color:Colors.greenAccent，//我现在用它来更改bgColor颜色
孩子：排(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
图标（图标。检查），
尺寸箱（宽度：10.0），
文本（“Konfirmasi更新”），
尺寸箱（宽度：10.0），
],
),
),
)
]
)
)
)

无法直接使用

PopupMenuButton

和

PopupMenuItem

小部件，因为如果您检查源代码，则存在用于垂直和水平填充的硬代码值

我修改了

弹出菜单.dart

文件的代码，特别是这些值：

const double _kMenuVerticalPadding = 0.0;//8.0;
const double _kMenuHorizontalPadding = 0.0;//16.0;

如果要使其正常工作，请将此文件下载到项目中：

在项目中导入该文件并添加别名：

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

@覆盖
小部件构建（构建上下文）{
返回脚手架(
正文：中(
子项：mypopup.PopupMenuButton(
海拔：20，
onSelected:（值）{
//TODO:实现onSelect
},
偏移量：偏移量（50,50），
itemBuilder：（上下文）=>[
mypopup.PopupMenuItem(
价值：1，
子：容器(
高度：双无限，
宽度：double.infinity，
颜色：颜色
.greenAccent，//我现在用它来更改bgColor颜色
孩子：排(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
图标（图标。检查），
尺寸箱（宽度：10.0），
文本（“Konfirmasi更新”），
尺寸箱（宽度：10.0），
],
),
),
),
mypopup.PopupMenuItem(
价值：1，
子：容器(
高度：双无限，
宽度：double.infinity，
孩子：排(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
图标（图标。检查），
尺寸箱（宽度：10.0），
文本（“修订更新”），
尺寸箱（宽度：10.0），
],
),
),
),
],
),
),
);
}

结果

---

另一种选择是继承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,
    );
  }
}

导入“包装：颤振/材料.省道”；
类CustomPopupMenuItem扩展了PopupMenuItem{
最终颜色；
const CustomPopupMenuItem({
关键点，
T值，
bool enabled=true，
孩子，
这个颜色，
})：super（键：键，值：值，启用：启用，子项：子项）；
@凌驾
_CustomPopupMenuItemState createState（）=>\u CustomPopupMenuItemState（）；
}
类_CustomPopupMenuItemState扩展了PopupMenuItemState{
@凌驾
小部件构建（构建上下文）{
返回容器(
子：super.build（上下文），
颜色：widget.color，
);
}
}

更改整个菜单或其子菜单的颜色非常容易

使用正则颜色表达式。 颜色：颜色。红色或任何你喜欢的颜色

---

您可以在

PopupMenuButton（）

或

PopupMenuItem（）

中使用它，它将更改整个弹出窗口的背景色，我想要的是更改特定弹出窗口项的背景色。在我的情况下，我只想更改“Konfirmasi更新”的背景色目前，greenSo的选项是框架的一个限制？颤振中有这么多小部件，所以哟