Flutter如何实现边框内嵌标签、随校验状态变色的TextFormField

不需要手动用Container封装边框，直接用Flutter原生提供的OutlineInputBorder即可实现目标效果，组件原生支持和Form校验状态联动，自动切换边框样式，完全不用手动监听输入状态维护边框颜色。

核心状态对应配置 #

• 无输入/未校验状态：通过enabledBorder配置灰色边框
• 校验错误状态：通过errorBorder、focusedErrorBorder配置红色边框，组件会在校验失败时自动切换到该样式，无需手动控制
• 校验通过状态：通过输入回调触发表单校验，记录校验结果，动态给边框配置绿色，可搭配对勾图标做视觉提示
• 内置浮动标签：直接给InputDecoration传入labelText即可实现标签嵌在边框线上的效果，和参考样式完全一致

完整可运行代码示例 #

import 'package:flutter/material.dart';

class CustomInputPage extends StatefulWidget {
  const CustomInputPage({super.key});

  @override
  State<CustomInputPage> createState() => _CustomInputPageState();
}

class _CustomInputPageState extends State<CustomInputPage> {
  final _formKey = GlobalKey<FormState>();
  bool _passValidation = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义输入框')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                decoration: InputDecoration(
                  labelText: '输入框标签',
                  contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
                  // 默认未聚焦无校验状态灰色边框
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: BorderSide(color: Colors.grey.shade400, width: 1.5),
                  ),
                  // 聚焦状态边框，校验通过时显示绿色
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: BorderSide(
                      color: _passValidation ? Colors.green : Colors.grey.shade600,
                      width: 2,
                    ),
                  ),
                  // 校验错误时红色边框（未聚焦）
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Colors.red, width: 1.5),
                  ),
                  // 校验错误时红色边框（聚焦）
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(6),
                    borderSide: const BorderSide(color: Colors.red, width: 2),
                  ),
                  // 校验通过时显示绿色对勾后缀
                  suffixIcon: _passValidation
                      ? const Icon(Icons.check_circle, color: Colors.green, size: 20)
                      : null,
                ),
                // 自定义校验规则，可根据业务需求修改
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '输入内容不能为空';
                  }
                  if (value.trim().length < 6) {
                    return '输入长度不能少于6位';
                  }
                  return null;
                },
                onChanged: (val) {
                  // 输入时实时校验，更新通过状态
                  final validateRes = _formKey.currentState?.validate() ?? false;
                  setState(() {
                    _passValidation = validateRes;
                  });
                },
              ),
              const SizedBox(height: 30),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState?.validate() ?? false) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('提交成功')),
                      );
                    }
                  },
                  child: const Text('提交'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

实现说明 #

• 不要手动封装Container绘制边框：原生InputDecoration体系下的边框会自动适配输入框的所有交互状态，包括聚焦、错误、禁用等，自己封装Container需要手动监听所有状态，很容易出现状态同步问题
• 错误态的边框、错误文本样式都是组件原生接管的，只要传入validator规则，校验失败时会自动切换红色边框、显示错误提示，不需要额外写状态判断
• 边框圆角、粗细、颜色、标签样式、内边距都可以在InputDecoration里直接调整，适配自己的设计规范即可

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