Flutter桌面应用：如何在TextField焦点切换时调用函数？

在Flutter桌面应用中，onEditingComplete仅在按下回车键时触发，若要实现焦点从第一个TextField切换到第二个时调用指定函数，可以通过FocusNode监听焦点状态变化来实现，具体步骤如下：

1. 定义FocusNode实例 #

在State类中声明两个FocusNode，分别绑定到对应的TextField：

late FocusNode vehicleNoFocusNode;
late FocusNode loadTypeFocusNode;

2. 初始化并添加焦点监听器 #

在initState中初始化FocusNode，并为第一个TextField的FocusNode添加监听器，当焦点失去时调用目标函数：

@override
void initState() {
  super.initState();
  vehicleNoFocusNode = FocusNode();
  loadTypeFocusNode = FocusNode();

  // 监听第一个TextField的焦点变化
  vehicleNoFocusNode.addListener(() {
    // 当焦点从第一个TextField移出时调用函数
    if (!vehicleNoFocusNode.hasFocus) {
      _handleLoadType();
    }
  });
}

3. 绑定FocusNode到TextField #

修改原代码中的TextField，为每个TextField指定focusNode属性：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Flutter App'),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
              controller: vehicleNoController,
              focusNode: vehicleNoFocusNode, // 绑定焦点节点
              decoration: InputDecoration(labelText: 'VehicleNo'),
              onEditingComplete: () {
                // 保留原回车触发逻辑（可选）
                _handleLoadType();
                // 回车后自动聚焦到第二个TextField（可选）
                FocusScope.of(context).requestFocus(loadTypeFocusNode);
              }),
          SizedBox(height: 16.0),
          TextField(
            controller: loadTypeController,
            focusNode: loadTypeFocusNode, // 绑定焦点节点
            decoration: InputDecoration(labelText: 'LoadType'),
          ),
        ],
      ),
    ),
  );
}

4. 销毁FocusNode避免内存泄漏 #

在dispose方法中释放FocusNode资源：

@override
void dispose() {
  vehicleNoFocusNode.dispose();
  loadTypeFocusNode.dispose();
  super.dispose();
}

可选优化 #

如果只希望在焦点明确转移到第二个TextField时触发函数，而非所有失去焦点的场景，可以修改监听器判断逻辑：

vehicleNoFocusNode.addListener(() {
  if (!vehicleNoFocusNode.hasFocus && loadTypeFocusNode.hasFocus) {
    _handleLoadType();
  }
});

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