Flutter中添加提交按钮时如何保持TextField输入焦点？

在MacOS和Web平台上，当TextField编辑后设置_isEdited标志，将其从单独Widget包裹进Column并添加提交按钮时，TextField会失去输入焦点和光标，需要重新点击才能继续输入。即使给TextField设置Key也无法解决，且不想始终保持相同Widget树或用不可见组件占用布局空间。

问题代码示例 #

Widget child = ... textfield ...;

if (_isEdited)
  child = Column(children: [child, button]);

无问题但场景受限的代码 #

Widget child = ... textfield ...;

if (_isEdited)
  child = Column(children: [child, button]);
else
  child = Column(children: [child]);

原因分析 #

Flutter更新Widget树时，会通过Widget类型、Key等判断是否复用已有Element。当直接将TextField替换为Column（父Widget类型变化），即使TextField有Key，Flutter会判定为全新Widget节点，销毁原TextField的Element并重建，导致焦点丢失。而始终用Column包裹时，父Element类型不变，仅更新Column的children，TextField的Element会被复用，焦点得以保留。

解决方案 #

方案1：手动保存并恢复焦点 #

利用FocusNode在状态更新前后管理焦点，UI更新完成后重新请求焦点：

void onChanged(String value) {
  // 记录当前聚焦状态
  final wasFocused = _focusNode.hasFocus;
  setState(() {
    _isEdited = true;
  });
  // 界面更新完成后恢复焦点
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (wasFocused) {
      FocusScope.of(context).requestFocus(_focusNode);
    }
  });
}

此方法无需修改Widget树结构，适合复杂场景下的焦点恢复。

方案2：保持父Widget结构一致性（优化版） #

始终用Column作为父容器，通过条件渲染控制按钮的显示，同时避免空容器占用空间：

Widget body(BuildContext context) {
  final textField = TextField(
    key: const Key("Key1"),
    focusNode: _focusNode,
    controller: _controller,
    onChanged: onChanged,
  );

  final button = submitButton(context);

  return Column(
    mainAxisSize: MainAxisSize.min, // 仅占用子Widget所需空间
    children: [
      textField,
      if (_isEdited) button,
    ],
  );
}

该方案通过固定父节点类型，确保TextField的Element被复用，焦点不会丢失。

方案3：用ValueListenableBuilder优化状态更新 #

通过ValueListenableBuilder封装可变部分，确保TextField的Element不被销毁：
首先定义状态通知器：

final ValueNotifier<bool> _isEditedNotifier = ValueNotifier(false);

修改onChanged方法：

void onChanged(String value) {
  _isEditedNotifier.value = true;
}

构建body部分：

Widget body(BuildContext context) {
  final textField = TextField(
    key: const Key("Key1"),
    focusNode: _focusNode,
    controller: _controller,
    onChanged: onChanged,
  );

  final button = submitButton(context);

  return ValueListenableBuilder<bool>(
    valueListenable: _isEditedNotifier,
    builder: (context, isEdited, child) {
      if (!isEdited) {
        return child!;
      }
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: [child!, button],
      );
    },
    child: textField, // 复用该TextField的Element
  );
}

此方法通过child参数传递TextField，确保状态更新时TextField的Element不被重建，保留焦点。

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