Flutter中弹出AlertDialog时如何保持TextFormField的焦点？

问题根源在于showDialog会创建新的路由栈，系统会自动将焦点转移到Dialog上，导致原TextFormField失焦。下面提供两种可行的解决方法：

方法一：用Overlay显示临时提示（最优解） #

Overlay不需要创建新路由，只是在当前界面的顶层插入一个视图，完全不会影响原有组件的焦点状态。实现步骤如下：

1. 定义OverlayEntry构建提示框：

OverlayEntry? _tipOverlay;

void _showLimitTip(BuildContext context) {
  // 先清除已存在的提示，避免重复显示
  _tipOverlay?.remove();

  _tipOverlay = OverlayEntry(
    builder: (ctx) => Positioned(
      top: MediaQuery.of(ctx).size.height * 0.2,
      left: 20,
      right: 20,
      child: Material(
        borderRadius: BorderRadius.circular(8),
        elevation: 4,
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Text('最多只能输入20个字符'),
        ),
      ),
    ),
  );

  // 将提示插入到Overlay中
  Overlay.of(context).insert(_tipOverlay!);

  // 3秒后自动移除提示
  Future.delayed(const Duration(seconds: 3), () {
    _tipOverlay?.remove();
    _tipOverlay = null;
  });
}

2. 在TextFormField的输入回调中触发提示，同时截断超出字符：

final _inputFocus = FocusNode();
final _textCtrl = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(16),
      child: TextFormField(
        focusNode: _inputFocus,
        controller: _textCtrl,
        onChanged: (value) {
          if (value.length > 20) {
            // 截断超出的字符，保持输入框内容符合限制
            _textCtrl.text = value.substring(0, 20);
            _textCtrl.selection = TextSelection.collapsed(
              offset: _textCtrl.text.length,
            );
            // 显示Overlay提示
            _showLimitTip(context);
          }
        },
        decoration: InputDecoration(
          hintText: '请输入内容（最多20字）',
        ),
      ),
    ),
  );
}

这种方式下，输入框的焦点全程不会丢失，用户可以连续输入，体验流畅。

方法二：弹窗后主动恢复焦点 #

如果一定要使用AlertDialog，可以在弹窗弹出后，通过FocusScope手动把焦点切回输入框。不过这种方式可能会有短暂的焦点切换闪烁，适合必须用Dialog的场景：

void _showDialogTip(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (ctx) => AlertDialog(
      content: Text('最多只能输入20个字符'),
    ),
  );

  // 延迟一小段时间恢复焦点，确保Dialog已经渲染完成
  Future.delayed(const Duration(milliseconds: 100), () {
    FocusScope.of(context).requestFocus(_inputFocus);
  });

  // 3秒后自动关闭弹窗
  Future.delayed(const Duration(seconds: 3), () {
    Navigator.of(context).pop();
  });
}

同样需要给TextFormField绑定FocusNode，这样才能准确恢复焦点。

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