Flutter：如何更改选中的PopupMenu菜单项背景颜色？

要修改PopupMenu选中项的背景颜色，有两种常用实现方式，可根据需求选择：

方法一：通过Theme统一设置样式 #

适合全局或局部统一PopupMenu风格的场景，一次设置即可应用到所有菜单项：

Theme(
  data: Theme.of(context).copyWith(
    popupMenuTheme: PopupMenuThemeData(
      color: Colors.white, // 菜单整体背景色
      selectedTileColor: const Color(0xffE0F2FE), // 选中项的背景色（匹配你示例中的浅蓝色效果）
      selectedItemColor: Colors.black, // 选中项的文字颜色
    ),
  ),
  child: PopupMenuButton(
    icon: const Icon(
      Icons.swap_vert,
      size: 26,
      color: Color(0xffffffff),
    ),
    itemBuilder: (context) {
      return [
        PopupMenuItem(
          value: 0,
          child: Text(
            "Date",
            style: GoogleFonts.poppins(
              color: const Color(0xff000000),
              fontSize: 14,
              fontWeight: FontWeight.w500,
              letterSpacing: 0.3,
            ),
          ),
        ),
        const PopupMenuItem<int>(
          value: 1,
          child: Text("Settings"),
        ),
        const PopupMenuItem<int>(
          value: 2,
          child: Text("Logout"),
        ),
      ];
    },
    onSelected: (value) {},
  ),
)

方法二：单独控制每个PopupMenuItem（支持保留选中状态） #

如果需要点击后保持选中项的高亮，或者给不同项设置不同样式，可通过selected属性和selectedTileColor实现：

首先在State类中定义变量记录选中项：

int? _selectedMenuItem;

然后修改PopupMenuButton实现：

PopupMenuButton(
  icon: const Icon(
    Icons.swap_vert,
    size: 26,
    color: Color(0xffffffff),
  ),
  itemBuilder: (context) {
    return [
      PopupMenuItem(
        value: 0,
        selected: _selectedMenuItem == 0,
        selectedTileColor: const Color(0xffE0F2FE),
        child: Text(
          "Date",
          style: GoogleFonts.poppins(
            color: _selectedMenuItem == 0 ? Colors.black : const Color(0xff000000),
            fontSize: 14,
            fontWeight: FontWeight.w500,
            letterSpacing: 0.3,
          ),
        ),
      ),
      PopupMenuItem<int>(
        value: 1,
        selected: _selectedMenuItem == 1,
        selectedTileColor: const Color(0xffE0F2FE),
        child: Text("Settings"),
      ),
      PopupMenuItem<int>(
        value: 2,
        selected: _selectedMenuItem == 2,
        selectedTileColor: const Color(0xffE0F2FE),
        child: Text("Logout"),
      ),
    ];
  },
  onSelected: (value) {
    setState(() {
      _selectedMenuItem = value;
    });
  },
)

补充说明 #

• 方法一的selectedTileColor会自动作用于所有选中项，无需单独配置每个PopupMenuItem；
• 方法二通过setState更新选中状态，能让用户直观看到当前选中的菜单项；
• 可根据UI需求调整selectedTileColor的颜色值，适配设计风格。

内容的提问来源于stack exchange，提问作者Divya