嘿，作为Flutter新手能想到做带实时验证的表单，已经很赞啦！完全能实现你说的这种仅在文本字段获焦时显示、可手动关闭的提示框，我给你捋捋具体的实现思路和代码示例，照着改改就能用：

核心思路 #

通过 FocusNode 监听文本字段的焦点状态，结合 TextEditingController 实时监听输入内容，再根据验证结果控制提示框的显示/隐藏。提示框可以用两种方式实现：简单的 Stack 布局，或者更灵活的 Overlay 组件（避免被其他UI遮挡）。

1. 准备基础变量 #

先定义需要的状态和控制器，用来管理焦点、输入内容、提示框显示状态和验证错误信息：

final FocusNode _emailFocusNode = FocusNode();
final TextEditingController _emailController = TextEditingController();
bool _showHintBox = false; // 控制提示框显示
String? _validationError; // 存储验证错误信息
OverlayEntry? _hintOverlay; // 用于Overlay实现的提示框

2. 监听焦点与输入变化 #

在 initState 里添加监听逻辑：当字段获焦时触发验证，失去焦点时隐藏提示框；输入内容变化时实时更新验证状态，同步控制提示框显示：

@override
void initState() {
  super.initState();
  
  // 监听焦点变化
  _emailFocusNode.addListener(() {
    if (_emailFocusNode.hasFocus) {
      // 获焦时立即验证当前输入
      _validationError = _validateEmail(_emailController.text);
      setState(() {
        _showHintBox = _validationError != null;
      });
      // 如果用Overlay实现，这里调用显示方法
      // if (_validationError != null && _hintOverlay == null) _showOverlayHint();
    } else {
      // 失焦时隐藏提示框
      setState(() {
        _showHintBox = false;
      });
      // Overlay版本：移除提示框
      // _hintOverlay?.remove();
      // _hintOverlay = null;
    }
  });

  // 实时监听输入内容变化，同步更新验证状态
  _emailController.addListener(() {
    if (_emailFocusNode.hasFocus) {
      setState(() {
        _validationError = _validateEmail(_emailController.text);
        // 验证错误消失则关闭提示框，出现则打开
        _showHintBox = _validationError != null;
      });
      // Overlay版本：同步更新提示框内容或显示状态
      // _updateOverlayHint();
    }
  });
}

3. 实现验证逻辑 #

写一个简单的邮箱验证函数（你可以换成自己需要的规则，比如密码强度、手机号格式等）：

String? _validateEmail(String value) {
  if (value.isEmpty) {
    return '请输入邮箱地址';
  }
  final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!emailRegex.hasMatch(value)) {
    return '请输入有效的邮箱格式';
  }
  return null;
}

4. 构建UI：两种提示框实现方式 #

方式一：简单Stack布局（适合基础场景）

直接在文本字段上方叠加提示框，位置固定：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('实时验证表单')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Stack(
        children: [
          // 文本表单字段
          TextFormField(
            focusNode: _emailFocusNode,
            controller: _emailController,
            decoration: const InputDecoration(
              labelText: '邮箱',
              border: OutlineInputBorder(),
            ),
          ),
          // 可关闭的提示框
          if (_showHintBox && _validationError != null)
            Positioned(
              top: 60, // 调整到文本框下方
              left: 0,
              right: 0,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                decoration: BoxDecoration(
                  color: Colors.red.shade50,
                  border: Border.all(color: Colors.red),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        _validationError!,
                        style: const TextStyle(color: Colors.red, fontSize: 14),
                      ),
                    ),
                    IconButton(
                      icon: const Icon(Icons.close, size: 18, color: Colors.red),
                      onPressed: () {
                        setState(() {
                          _showHintBox = false;
                        });
                      },
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
    ),
  );
}

方式二：Overlay组件（推荐，避免UI遮挡）

用Overlay创建悬浮提示框，位置可以根据文本字段动态计算：

void _showOverlayHint() {
  final renderBox = context.findRenderObject() as RenderBox;
  final fieldOffset = renderBox.localToGlobal(Offset.zero);
  final fieldSize = renderBox.size;

  _hintOverlay = OverlayEntry(
    builder: (context) => Positioned(
      left: fieldOffset.dx,
      top: fieldOffset.dy + fieldSize.height + 8,
      width: fieldSize.width,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        decoration: BoxDecoration(
          color: Colors.red.shade50,
          border: Border.all(color: Colors.red),
          borderRadius: BorderRadius.circular(4),
          boxShadow: [BoxShadow(color: Colors.grey.shade300, blurRadius: 4)],
        ),
        child: Row(
          children: [
            Expanded(child: Text(_validationError!, style: const TextStyle(color: Colors.red, fontSize: 14))),
            IconButton(
              icon: const Icon(Icons.close, size: 18, color: Colors.red),
              onPressed: () {
                _hintOverlay?.remove();
                _hintOverlay = null;
              },
            ),
          ],
        ),
      ),
    ),
  );
  Overlay.of(context).insert(_hintOverlay!);
}

5. 资源清理 #

别忘了在组件销毁时释放控制器和焦点资源：

@override
void dispose() {
  _emailFocusNode.dispose();
  _emailController.dispose();
  _hintOverlay?.remove();
  super.dispose();
}

这样就能实现你想要的效果啦：文本字段获焦时，根据输入内容实时验证并显示带关闭按钮的提示框，失焦时自动隐藏，手动关闭后也不会再弹出（除非重新获焦且输入仍不符合规则）。

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