Flutter中如何移除PopupMenuButton子项的灰色高亮文本层？

问题分析 #

你在PopupMenuItem内部嵌套了另一个PopupMenuButton，外层PopupMenuItem默认带有鼠标悬停的灰色高亮效果，与内部文本区域的样式冲突，导致出现双重高亮层。

解决方案 #

方法一：禁用外层PopupMenuItem的默认高亮 #

通过设置style移除hover背景，并禁用外层条目鼠标交互：

PopupMenuItem(
  mouseCursor: MouseCursor.defer,
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.transparent),
  ),
  child: PopupMenuButton(
    tooltip: "Изменить статус",
    onSelected: (value) {
      changeTaskStatus(value, context, data, ref);
    },
    child: const Row(
      children: [
        Text(
          'Изменить статус',
          style: TextStyle(height: 3),
        ),
        Spacer(),
        Icon(Icons.arrow_right)
      ],
    ),
    itemBuilder: (BuildContext context) =>
        <PopupMenuEntry<int>>[
      const PopupMenuItem<int>(
        value: 0,
        child: Text('В работе'),
      ),
      const PopupMenuItem<int>(
        value: 1,
        child: Text('Выполнена'),
      ),
      const PopupMenuItem<int>(
        value: 2,
        child: Text('Отменена'),
      ),
    ],
  ),
),

方法二：使用自定义菜单条目替代外层PopupMenuItem #

用CustomPopupMenuEntry包裹内部组件，避免默认的高亮样式：

CustomPopupMenuEntry(
  child: InkWell(
    onTap: () {},
    child: PopupMenuButton(
      tooltip: "Изменить статус",
      onSelected: (value) {
        changeTaskStatus(value, context, data, ref);
      },
      child: const Row(
        children: [
          Text(
            'Изменить статус',
            style: TextStyle(height: 3),
          ),
          Spacer(),
          Icon(Icons.arrow_right)
        ],
      ),
      itemBuilder: (BuildContext context) =>
          <PopupMenuEntry<int>>[
        const PopupMenuItem<int>(
          value: 0,
          child: Text('В работе'),
        ),
        const PopupMenuItem<int>(
          value: 1,
          child: Text('Выполнена'),
        ),
        const PopupMenuItem<int>(
          value: 2,
          child: Text('Отменена'),
        ),
      ],
    ),
  ),
),

说明 #

方法一更为简洁，直接让外层PopupMenuItem放弃鼠标交互和高亮效果，完全由内部的PopupMenuButton处理用户操作，即可消除额外的灰色高亮层。

内容的提问来源于stack exchange，提问作者Артем Ильинский