flutter PopupMenuButton添加背景颜色_popupmenubutton设置背景-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44911775/article/details/130147346

这段代码展示了如何在Flutter应用中创建一个具有自定义背景颜色的PopupMenuButton。通过ThemeData的cardColor属性设置卡片颜色，并创建独立的Theme避免全局样式影响。此外，代码还包含了PopupMenuItem的构建，用于显示不同的数值选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考
参考代码

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的ThemeData的cardColor，定义一个独立的 ThemeData，不想从任何全局 Theme 继承样式

Theme(
                                  data: ThemeData(
                                    cardColor: const Color(0xFF0E111A),
                                  ),
                                  child: PopupMenuButton(
                                      offset: const Offset(0.0, 50.0),
                                      child: Row(children: [
                                        Expanded(
                                            child: ContentText(
                                                '$currentGiftCount',
                                                12.0,
                                                Colors.white)),
                                        Image(
                                            image: const AssetImage('assets/images/group/icon_group_upward_arrow.png'),
                                            width: WidgetAdaptation.getWidth(10),color: const Color(0xFFD159FD),)
                                      ]),
                                      onSelected: (int value) {
                                        currentGiftCount = value;
                                        mySetState(() {});
                                      },
                                      itemBuilder: (BuildContext context) {
                                        return _getCountContents;
                                      }),
                                )


  List<PopupMenuItem<int>> get _getCountContents {
    List<PopupMenuItem<int>> contents = [];
    contents.add(PopupMenuItem<int>(
        child: ContentText('1', 16, Colors.white), value: 1));
    contents.add(PopupMenuItem<int>(
        child: ContentText('66', 16, Colors.white), value: 66));
    contents.add(PopupMenuItem<int>(
        child: ContentText('88', 16, Colors.white), value: 88));
    contents.add(PopupMenuItem<int>(
        child: ContentText('99', 16, Colors.white), value: 99));
    contents.add(PopupMenuItem<int>(
        child: ContentText('666', 16, Colors.white),
        value: 666));
    contents.add(PopupMenuItem<int>(
        child: ContentText('888', 16, Colors.white),
        value: 888));
    contents.add(PopupMenuItem<int>(
        child: ContentText('999', 16, Colors.white),
        value: 999));
    return contents;
  }