如何在 Flutter 中更改 PopupMenuItem 的背景颜色答案

【问题标题】：How to change background color of PopupMenuItem in Flutter如何在 Flutter 中更改 PopupMenuItem 的背景颜色
【发布时间】：2019-07-08 02:02:29
【问题描述】：

flutter中如何改变PopupMenuItem的背景颜色？

现在我只是改变了PopupMenuItem的child的颜色，结果是这样的：

代码如下：

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外面的白色区域？

【问题讨论】：

标签： flutter flutter-layout

【解决方案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,
    );
  }
}

【讨论】：

这是该线程最有帮助的答案：P
这对我来说是最好的解决方案，并且完全按照我的意愿工作！谢谢

【解决方案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),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

结果

【讨论】：

那么目前这是框架的限制吗？
Flutter 中有这么多的小部件，所以你可以像我一样创建自己的小部件。或者我们也可以将这些属性（垂直和水平填充）添加到当前小部件并发送拉取请求。
一直在研究这个问题，很高兴看到这篇文章。我的预感是对的。

【解决方案3】：

您可以将 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),
                        ],
                      ),
                    ),
                  )
                ]
            )
        )
    )

【讨论】：

它会改变整个弹出的背景颜色，我想要的是改变特定弹出项的背景颜色。就我而言，我只想将“Konfirmasi Update”选项的背景颜色更改为绿色

【解决方案4】：

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

使用常规颜色表达式。颜色：Colors.red 或任何你喜欢的颜色。

您可以在PopupMenuButton() 或PopupMenuItem() 中使用它。

【讨论】：