Flutter中如何从CustomTextField获取错误文本？

核心问题修正说明 #

1. 移除静态字段errRetText：静态字段属于类而非实例，所有CustomTextField会共享同一个错误文本，完全不符合“每个实例单独存储”的需求。
2. 添加实例级错误存储字段：在State类中定义String? _currentErrorText，专门存储当前实例的错误文本。
3. 通过GlobalKey访问实例错误文本：外部要获取每个实例的错误文本，需给每个CustomTextField分配GlobalKey<_CustomTextFieldState>（需暴露State类）。
4. 同步更新错误文本：在计算错误的err getter中，同步更新_currentErrorText的值，确保UI和存储的错误文本一致。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'DateHelper.dart';
import 'general.dart';

// 暴露State类，方便通过GlobalKey访问
class CustomTextField extends StatefulWidget {
  final String hint;
  final TextEditingController controller;
  final bool isPassword;
  final TextInputType keyboardType;
  final String textType; // Date, Number, NullText, ""
  final bool obscureText;
  final List<TextInputFormatter> inputFormatters;
  final Function(String) onChanged; // 修正参数类型，避免类型不安全

  const CustomTextField({
    Key? key,
    required this.hint,
    required this.controller,
    required this.isPassword,
    this.keyboardType = TextInputType.text,
    required this.textType,
    this.obscureText = false,
    required this.inputFormatters,
    required this.onChanged,
  }) : super(key: key);

  @override
  _CustomTextFieldState createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  late bool valEdited;
  bool showPassword = false;
  String? _currentErrorText; // 实例级错误文本存储

  // 外部可访问的错误文本getter
  String? get errText => _currentErrorText;

  @override
  void initState() {
    super.initState();
    valEdited = false;
    // 监听文本变化，实时更新错误
    widget.controller.addListener(_updateError);
  }

  @override
  void dispose() {
    widget.controller.removeListener(_updateError);
    super.dispose();
  }

  // 手动更新错误文本的方法
  void _updateError() {
    setState(() {
      _currentErrorText = err;
    });
  }

  String? get err {
    final text = widget.controller.value.text;
    if (!valEdited) return null;

    if (widget.textType == "Date") {
      if (text.isEmpty) return '不能为空';
      if (!DateHelper.isValidDate(text)) return '日期格式无效';
    } else if (widget.textType == "Number") {
      if (text.isEmpty) return '不能为空';
      if (!General.isNumeric(text)) return '请输入有效数字';
    } else if (widget.textType == "NullText") {
      if (text.isEmpty) return '不能为空';
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextFormField(
          controller: widget.controller,
          autovalidateMode: AutovalidateMode.disabled,
          textCapitalization: TextCapitalization.words,
          keyboardType: widget.keyboardType,
          inputFormatters: widget.inputFormatters,
          obscureText: !showPassword && widget.isPassword,
          onChanged: (String newValue) {
            setState(() {
              valEdited = true;
            });
            widget.onChanged(newValue);
            _updateError(); // 文本变化时同步更新错误
          },
          decoration: InputDecoration(
            suffixIcon: widget.isPassword
                ? IconButton(
                    icon: Icon(
                      Icons.remove_red_eye,
                      color: showPassword ? Colors.blue : Colors.grey,
                    ),
                    onPressed: () => setState(() => showPassword = !showPassword),
                  )
                : IconButton(
                    icon: Icon(
                      Icons.clear,
                      color: widget.controller.text.isEmpty ? Colors.grey : Colors.blue,
                    ),
                    onPressed: () => widget.controller.clear()),
            border: const OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            filled: true,
            hintStyle: TextStyle(color: Colors.grey[800]),
            hintText: widget.hint,
            labelText: widget.hint,
            labelStyle: MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
              final Color color = states.contains(MaterialState.error)
                  ? Theme.of(context).colorScheme.error
                  : Colors.orange;
              return TextStyle(color: color, letterSpacing: 1.3);
            }),
            fillColor: Colors.blue[200],
            errorText: _currentErrorText, // 使用实例级错误文本
          ),
        ),
        const SizedBox(height: 25),
      ],
    );
  }
}

外部获取实例错误文本的方法 #

1. 声明GlobalKey：

final GlobalKey<_CustomTextFieldState> _emailFieldKey = GlobalKey();
final GlobalKey<_CustomTextFieldState> _phoneFieldKey = GlobalKey();

2. 创建CustomTextField时传入key：

CustomTextField(
  key: _emailFieldKey,
  hint: '邮箱',
  controller: _emailController,
  isPassword: false,
  textType: 'NullText',
  inputFormatters: [],
  onChanged: (value) {},
),

3. 任意时刻获取错误文本：

String? emailError = _emailFieldKey.currentState?.errText;
String? phoneError = _phoneFieldKey.currentState?.errText;

额外优化点 #

• 修正onChanged参数类型，从泛型Function改为Function(String)，避免类型不安全问题。
• 添加controller监听器，确保文本变化时自动更新错误文本，无需手动触发。
• 移除构造函数中未使用的onTap和decoration参数（原代码中decoration被build方法内的自定义实现覆盖，无实际作用）。

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