Flutter如何修复ListView项点击失焦导致快捷键失效问题

点击列表项后快捷键失效由两个问题导致：

1. InkWell、ListTile默认点击逻辑不会主动为当前组件请求焦点，点击触发后焦点会回到此前持有焦点的组件（示例中为AppBar内的TextField），无焦点的组件无法响应绑定的快捷键事件。
2. 为每个列表项单独嵌套Shortcuts、Actions的写法冗余，且焦点丢失后快捷键分发链路直接中断。

• 快捷键逻辑上移：将Shortcuts、Actions组件从单个列表项移到ListView外层，统一维护快捷键映射，通过当前聚焦的列表项索引触发对应业务逻辑，避免重复嵌套。
• 维护列表项焦点节点：在状态控制器中为每个列表项生成独立的FocusNode，监听焦点变化记录当前聚焦项索引；列表项点击事件触发时，先主动调用对应节点的requestFocus()方法抢占焦点，再执行业务逻辑。
• 移除冗余焦点监听：删除AppBar中手写的方向键焦点切换逻辑，Flutter自带的FocusScope默认支持方向键、Tab键在可聚焦组件间切换焦点，无需额外实现。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

void main() {
  runApp(const MyApp());
}

class EnterIntent extends Intent {}
class CopyIntent extends Intent {}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<Controller>(
      init: Get.put(Controller()),
      builder: (controller) {
        final List<MyItemModel> myItemModelList = controller.myItemModelList;
        return Scaffold(
          appBar: AppBar(
            title: const TextField(
              autofocus: true,
            ),
          ),
          body: myItemModelList.isEmpty
              ? const Center(child: CircularProgressIndicator())
              : Shortcuts(
                  shortcuts: {
                    LogicalKeySet(LogicalKeyboardKey.enter): EnterIntent(),
                    LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyC): CopyIntent(),
                  },
                  child: Actions(
                    actions: {
                      EnterIntent: CallbackAction<EnterIntent>(
                        onInvoke: (intent) {
                          final currentItem = myItemModelList[controller.currentFocusIndex];
                          print('Enter键触发，当前操作项：${currentItem.name}');
                          return null;
                        },
                      ),
                      CopyIntent: CallbackAction<CopyIntent>(
                        onInvoke: (intent) {
                          final currentItem = myItemModelList[controller.currentFocusIndex];
                          Clipboard.setData(ClipboardData(text: '${currentItem.name}\n${currentItem.detail}'));
                          print('Ctrl+C触发，已复制当前项内容');
                          return null;
                        },
                      ),
                    },
                    child: FocusScope(
                      autofocus: false,
                      child: ListView.builder(
                        itemBuilder: (context, index) {
                          final MyItemModel item = myItemModelList[index];
                          return InkWell(
                            focusColor: Colors.blue,
                            focusNode: controller.itemFocusNodes[index],
                            onTap: () {
                              print('点击列表项 $index');
                              controller.requestItemFocus(index);
                              controller.toggleIsSelected(item);
                            },
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                color: myItemModelList[index].isSelected
                                    ? Colors.green
                                    : null,
                                height: 50,
                                child: ListTile(
                                  title: Text(myItemModelList[index].name),
                                  subtitle: Text(myItemModelList[index].detail),
                                ),
                              ),
                            ),
                          );
                        },
                        itemCount: myItemModelList.length,
                      ),
                    ),
                  ),
                ),
        );
      },
    );
  }
}

class Controller extends GetxController {
  List<MyItemModel> myItemModelList = [];
  late List<FocusNode> itemFocusNodes;
  int currentFocusIndex = 0;

  @override
  void onReady() {
    myItemModelList = buildMyItemModelList(100);
    itemFocusNodes = List.generate(
      myItemModelList.length,
      (index) => FocusNode(debugLabel: 'list_item_$index')
        ..addListener(() {
          if (itemFocusNodes[index].hasFocus) {
            currentFocusIndex = index;
          }
        }),
    );
    update();
    super.onReady();
  }

  void requestItemFocus(int index) {
    itemFocusNodes[index].requestFocus();
  }

  List<MyItemModel> buildMyItemModelList(int count) {
    return Iterable<MyItemModel>.generate(
      count,
      (index) {
        return MyItemModel('$index - 按Enter键查看调试控制台输出',
            '$index - 点击后按Enter即可正常触发快捷键\n通过Tab/方向键聚焦后按Enter效果一致');
      },
    ).toList();
  }

  toggleIsSelected(MyItemModel item) {
    for (var e in myItemModelList) {
      if (e == item) {
        e.isSelected = !e.isSelected;
      }
    }
    update();
  }

  @override
  void onClose() {
    for (final node in itemFocusNodes) {
      node.dispose();
    }
    super.onClose();
  }
}

class MyItemModel {
  final String name;
  final String detail;
  bool isSelected = false;

  MyItemModel(this.name, this.detail);
}

• 焦点节点必须在页面销毁时调用dispose()释放，避免内存泄漏。
• 如果需要页面加载后默认聚焦第一个列表项，可在onReady方法末尾添加requestItemFocus(0)。
• 如需扩展更多快捷键，只需在shortcuts映射中添加对应按键组合、在actions中实现对应逻辑即可，无需修改列表项代码。
• 该方案已在Windows 10、Flutter 3.0.1环境下验证可用，兼容Get状态管理框架。

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