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

ljsrvy3e  于 2023-03-24  发布在  Flutter
关注(0)|答案(5)|浏览(264)

如何在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更新”选项的背景颜色,正如你可以看到上面的图片颜色是离开选项外的白色区域。
如何完全改变PopupMenuItem的背景颜色,而不留下PopupMenuItem外部的白色区域?

ftf50wuq

ftf50wuq1#

另一种方法是从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,
    );
  }
}
igsr9ssn

igsr9ssn2#

没有办法开箱即用地使用PopupMenuButtonPopupMenuItem小部件,因为如果检查源代码,就会发现垂直和水平填充有硬代码值。
我修改了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),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

结果

monwx1rj

monwx1rj3#

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

pw9qyyiw4#

对于Flutter 3.7,我将@erli命题修改为这样的版本:

class CustomPopupMenuItem<T> extends PopupMenuItem<T> {
  const CustomPopupMenuItem({
    super.key,
    super.value,
    super.onTap,
    super.height,
    super.enabled,
    super.child,
    this.color,
  });
  final Color? color;

  @override
  CustomPopupMenuItemState<T> createState() => CustomPopupMenuItemState<T>();
}

class CustomPopupMenuItemState<T>
    extends PopupMenuItemState<T, CustomPopupMenuItem<T>> {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: widget.color,
      child: super.build(context),
    );
  }
}
zc0qhyus

zc0qhyus5#

非常容易改变整个菜单的颜色或只是它的孩子。
使用正则颜色表达式。color:Colors.red或任何你喜欢的颜色。
您可以在PopupMenuButton()PopupMenuItem()中使用它。

相关问题