Flutter：如何在TextFormField的Label中加图标并解决覆盖问题

问题根源在于默认的TextFormField浮动标签逻辑仅适配纯文本的labelText，当用Row组合文本与图标作为label时，系统无法自动处理这个复杂组件的尺寸与位置变化，输入时就会出现浮动提示覆盖原标签的情况。以下是两种可行解决方案：

方法一：禁用浮动标签（简单直接） #

让label固定显示在输入框上方，不会随输入状态浮动，彻底避免重叠：

TextFormField(
  decoration: InputDecoration(
    label: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          "Email Address",
          style: TextStyle(color: Colors.grey),
        ),
        SizedBox(width: 5),
        Tooltip(
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey.shade500,
          ),
          message: "We use your email to validate your identity, create your user id, and to contact you for account-related matters.",
          child: IconButton(
            icon: Icon(Icons.info, color: Colors.grey),
            onPressed: () {
              // 自定义点击逻辑
            },
          ),
        ),
      ],
    ),
    floatingLabelBehavior: FloatingLabelBehavior.never, // 核心配置：禁用浮动
    border: OutlineInputBorder(), // 可选：添加边框让布局更清晰
  ),
)

方法二：保留浮动效果（适配Material设计） #

通过监听输入框焦点状态，动态调整label内文本和图标的样式、尺寸，让自定义label适配浮动逻辑：

class EmailInput extends StatefulWidget {
  @override
  State<EmailInput> createState() => _EmailInputState();
}

class _EmailInputState extends State<EmailInput> {
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 监听焦点变化触发UI更新
    _focusNode.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isFocused = _focusNode.hasFocus;
    // 根据焦点状态调整label样式
    final labelTextStyle = Theme.of(context).textTheme.titleMedium?.copyWith(
          color: isFocused ? Colors.blue : Colors.grey,
          fontSize: isFocused ? 12 : 16,
        );

    return TextFormField(
      focusNode: _focusNode,
      decoration: InputDecoration(
        label: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            AnimatedDefaultTextStyle(
              style: labelTextStyle!,
              duration: const Duration(milliseconds: 200),
              child: const Text("Email Address"),
            ),
            SizedBox(width: isFocused ? 3 : 5),
            Tooltip(
              margin: const EdgeInsets.all(10),
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey.shade500,
              ),
              message: "We use your email to validate your identity, create your user id, and to contact you for account-related matters.",
              child: Icon(
                Icons.info,
                color: isFocused ? Colors.blue : Colors.grey,
                size: isFocused ? 16 : 24,
              ),
            ),
          ],
        ),
        floatingLabelBehavior: FloatingLabelBehavior.auto,
        border: const OutlineInputBorder(),
      ),
    );
  }
}

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