如何实现两个TextField在同一位置显示自定义错误提示

针对两个TextField共用同一错误提示位置的需求，推荐两种可行方案：

方案一：手动管理共享错误状态（最直接） #

不用依赖Form/TextFormField的自动验证机制，自己维护一个全局错误状态变量，在两个输入框的验证逻辑中统一更新这个变量，最后在指定位置渲染错误信息。

代码示例： #

class SharedErrorTextField extends StatefulWidget {
  @override
  _SharedErrorTextFieldState createState() => _SharedErrorTextFieldState();
}

class _SharedErrorTextFieldState extends State<SharedErrorTextField> {
  final _controller1 = TextEditingController();
  final _controller2 = TextEditingController();
  String? _sharedError;

  // 验证输入1的逻辑
  bool _validateInput1() {
    if (_controller1.text.isEmpty) {
      setState(() {
        _sharedError = "输入1不能为空";
      });
      return false;
    }
    return true;
  }

  // 验证输入2的逻辑
  bool _validateInput2() {
    if (_controller2.text.length < 6) {
      setState(() {
        _sharedError = "输入2长度不能少于6位";
      });
      return false;
    }
    return true;
  }

  // 统一验证两个输入
  void _validateAll() {
    setState(() {
      _sharedError = null;
    });
    bool isValid1 = _validateInput1();
    bool isValid2 = _validateInput2();
    // 如果两个都合法，可执行提交逻辑
    if (isValid1 && isValid2) {
      // 提交操作
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller1,
          decoration: const InputDecoration(
            labelText: "输入框1",
          ),
          onChanged: (_) {
            // 输入时可清空错误，或实时验证
            setState(() {
              _sharedError = null;
            });
          },
        ),
        TextField(
          controller: _controller2,
          decoration: const InputDecoration(
            labelText: "输入框2",
          ),
          onChanged: (_) {
            setState(() {
              _sharedError = null;
            });
          },
        ),
        // 共用的错误提示位置，替换原有的"Error message"
        if (_sharedError != null)
          Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: Text(
              _sharedError!,
              style: const TextStyle(color: Colors.red),
            ),
          ),
        ElevatedButton(
          onPressed: _validateAll,
          child: const Text("提交"),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }
}

方案二：基于Form自定义共享错误逻辑 #

如果仍想使用Form组件，可以自定义一个共享错误的状态类，在Form的提交方法中，遍历所有FormField的验证结果，将第一个错误信息（或合并后的信息）赋值给共享变量，再统一展示。

代码示例： #

class SharedErrorForm extends StatefulWidget {
  @override
  _SharedErrorFormState createState() => _SharedErrorFormState();
}

class _SharedErrorFormState extends State<SharedErrorForm> {
  final _formKey = GlobalKey<FormState>();
  String? _sharedError;

  void _submitForm() {
    setState(() {
      _sharedError = null;
    });
    if (_formKey.currentState!.validate()) {
      // 验证通过，执行提交
    } else {
      // 遍历FormField，获取第一个错误信息
      final errors = <String>[];
      _formKey.currentState!.fields.forEach((key, field) {
        final error = field.errorText;
        if (error != null) errors.add(error);
      });
      if (errors.isNotEmpty) {
        setState(() {
          _sharedError = errors.first;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: const InputDecoration(labelText: "输入框1"),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return "输入1不能为空";
              }
              return null;
            },
            // 关闭自带的错误提示
            autovalidateMode: AutovalidateMode.disabled,
          ),
          TextFormField(
            decoration: const InputDecoration(labelText: "输入框2"),
            validator: (value) {
              if (value == null || value.length < 6) {
                return "输入2长度不能少于6位";
              }
              return null;
            },
            autovalidateMode: AutovalidateMode.disabled,
          ),
          // 共用错误提示位置
          if (_sharedError != null)
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                _sharedError!,
                style: const TextStyle(color: Colors.red),
              ),
            ),
          ElevatedButton(
            onPressed: _submitForm,
            child: const Text("提交"),
          ),
        ],
      ),
    );
  }
}

注意事项： #

• 如果需要实时验证（输入时就显示错误），可以在TextField的onChanged中手动触发对应输入的验证逻辑，更新共享错误状态；
• 若两个输入可能同时出错，可根据需求选择展示第一个错误、合并错误信息，或自定义错误优先级。

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