Flutter：将鼠标悬停在 ListTile 上的菜单项上会突出显示包含它的列表项，并且不会消失

Question

使用下面的代码，当我单击菜单锚点按钮并将鼠标悬停在菜单项上时，其下方的 ListTile 也会突出显示。之后，关闭菜单仍然会使 ListTile “突出显示”并保持突出显示状态，无法禁用它。我该如何防止这种情况发生？

DartPad 演示

另外，你应该如何在 VSCode 中调试这种行为？

ListView.builder(
  itemCount: tasks.length,
  itemBuilder: (context, index) {
    final task = tasks[index];
    return Material(
      key: Key(task.id.toString()),
      type: MaterialType.transparency,
      child: ListTile(
        title: Text(task.name),
        onTap: () async {},
        trailing: MenuAnchor(
          menuChildren: menuItems
              .map(
                (item) => Material(
                  child: MenuItemButton(
                    child: Text(item),
                    onPressed: () {},
                  ),
                ),
              )
              .toList(),
          builder: (context, controller, child) => IconButton(
            icon: const Icon(Icons.more_vert),
            onPressed: () {
              if (controller.isOpen) {
                controller.close();
              } else {
                controller.open();
              }
            },
          ),
        ),
      ),
    );
  },
)

在网络和 flutter 存储库上搜索有关此行为的提及，但我没有找到。我尝试用

MenuItemButton

包裹

Material

，但这似乎没有帮助。

Answer 1

一旦菜单项突出显示，焦点似乎就被困在

ListTile

中。要调试此行为，请使用

ListTile

回调观察每个

onFocusChange

上的焦点变化：

onFocusChange: (isFocus) {
  // ...
}

---

我可以想到三种方法来解决这个问题。

1. 手动管理

   ListTile

   的焦点节点，以便您可以取消它们的焦点
2. 使用

   MenuBar

   代替

   MenuAnchor

3. 将

   ListTile

   的焦点颜色设置为透明

对于最后一种方法，你会这样做

ListTile(
  focusColor: Colors.transparent,
  // ...
)