如何通过代码为Autocomplete的fieldViewBuilder构建的TextField设置焦点？

问题原因 #

你在fieldViewBuilder内调用setState保存focusNode的方式会触发整个页面重建，而Autocomplete组件会在重建时重新创建新的FocusNode实例，导致你之前保存的myFocusNode失效；同时build方法中直接调用requestFocus的时机也不合理——build会频繁执行，可能引发重复请求焦点或焦点丢失的问题。

解决方案 #

方法1：直接保存FocusNode到非状态变量，无需触发setState

无需用setState保存焦点节点，直接用普通变量存储，避免触发不必要的页面重建，后续在需要的时机调用焦点请求即可：

FocusNode? _internalFocusNode; // 用非状态变量存储，不触发setState

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      // ... 原有文本、开关组件
      const SizedBox(height: 32.0),
      Autocomplete<String>(
        fieldViewBuilder: (BuildContext context,
            TextEditingController controller,
            FocusNode focusNode,
            VoidCallback onFieldSubmitted) {
          _internalFocusNode = focusNode; // 直接保存，不用setState
          
          // 如需页面加载后立即获取焦点，可在这里添加：
          // WidgetBinding.instance.addPostFrameCallback((_) {
          //   focusNode.requestFocus();
          // });
          
          return Padding(
            padding: const EdgeInsets.all(12.0),
            child: TextFormField(
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                errorText: _networkError ? 'Network error, please try again.' : null,
              ),
              controller: controller,
              focusNode: focusNode,
              onFieldSubmitted: (String value) {
                onFieldSubmitted();
              },
            ),
          );
        },
        // ... Autocomplete的其他配置参数
      ),
      // 示例：点击按钮触发焦点请求
      ElevatedButton(
        onPressed: () => _internalFocusNode?.requestFocus(),
        child: const Text('获取输入框焦点'),
      )
    ],
  );
}

@override
void dispose() {
  // 注意：此FocusNode由Autocomplete内部管理，无需手动销毁
  super.dispose();
}

方法2：使用自定义FocusNode完全掌控生命周期

如果你需要完全控制焦点的创建与销毁，可以自行初始化FocusNode，替代Autocomplete提供的节点：

late FocusNode _customFocusNode;

@override
void initState() {
  super.initState();
  _customFocusNode = FocusNode();
  
  // 页面初始化完成后自动获取焦点
  WidgetBinding.instance.addPostFrameCallback((_) {
    _customFocusNode.requestFocus();
  });
}

@override
void dispose() {
  _customFocusNode.dispose(); // 自定义FocusNode必须手动销毁，避免内存泄漏
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      // ... 原有文本、开关组件
      const SizedBox(height: 32.0),
      Autocomplete<String>(
        fieldViewBuilder: (BuildContext context,
            TextEditingController controller,
            FocusNode _, // 忽略Autocomplete提供的焦点节点
            VoidCallback onFieldSubmitted) {
          return Padding(
            padding: const EdgeInsets.all(12.0),
            child: TextFormField(
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                errorText: _networkError ? 'Network error, please try again.' : null,
              ),
              controller: controller,
              focusNode: _customFocusNode, // 使用自定义焦点节点
              onFieldSubmitted: (String value) {
                onFieldSubmitted();
              },
            ),
          );
        },
        // ... Autocomplete的其他配置参数
      ),
    ],
  );
}

关键注意事项 #

• 禁止在fieldViewBuilder中调用setState保存焦点节点，这会导致页面重复重建，焦点实例失效。
• 自定义FocusNode时，必须在dispose方法中手动销毁，防止内存泄漏。
• 调用requestFocus的时机要合理：推荐在initState配合addPostFrameCallback，或在用户交互事件（如按钮点击）中触发，不要直接在build方法中调用。

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