Flutter：如何在Text组件中显示错误信息替代默认提示

要实现将所有表单错误集中显示在Form外部的独立Text组件中，你可以按照以下步骤修改代码：

1. 添加状态变量存储错误信息 #

在你的State类中添加一个列表，用于收集所有输入框的错误信息：

List<String> _errorMessages = [];

2. 编写更新错误信息的方法 #

通过FormKey获取表单状态，遍历所有字段收集错误文本：

void _updateErrorMessages() {
  final formState = widget.formKey.currentState;
  if (formState != null) {
    // 收集所有非空的错误信息
    _errorMessages = formState.fields
        .map((field) => field.errorText)
        .where((error) => error != null)
        .cast<String>()
        .toList();
    setState(() {});
  }
}

3. 绑定输入框交互事件 #

为每个TextFormField添加onChanged和onFieldSubmitted回调，确保用户输入时实时更新错误列表：

// PQ输入框示例
TextFormField(
  // 原有属性保持不变...
  onChanged: (_) => _updateErrorMessages(),
  onFieldSubmitted: (_) => _updateErrorMessages(),
)

// UQ输入框同样添加上述回调

4. 在Form外部添加错误展示组件 #

在Form组件之后添加一个Text组件，用于显示所有收集到的错误信息：

// 原有Form代码...

// 错误信息展示
if (_errorMessages.isNotEmpty)
  Padding(
    padding: const EdgeInsets.only(top: 8.0),
    child: Text(
      _errorMessages.join('\n'),
      style: const TextStyle(
        color: Colors.red,
        fontSize: 14,
      ),
      textAlign: TextAlign.center,
    ),
  )

5. 提交表单时同步错误信息 #

在提交按钮的点击事件中，先触发表单验证，再更新错误列表：

ElevatedButton(
  onPressed: () {
    final formState = widget.formKey.currentState;
    if (formState != null) {
      // 触发所有字段的验证
      formState.validate();
      // 更新错误列表
      _updateErrorMessages();
      if (_errorMessages.isEmpty) {
        // 表单验证通过，执行保存和提交逻辑
        formState.save();
        // 这里添加你的后续操作
      }
    }
  },
  child: const Text('提交'),
)

完整修改后的代码片段 #

// 假设这是你的State类内部代码
List<String> _errorMessages = [];

void _updateErrorMessages() {
  final formState = widget.formKey.currentState;
  if (formState != null) {
    _errorMessages = formState.fields
        .map((field) => field.errorText)
        .where((error) => error != null)
        .cast<String>()
        .toList();
    setState(() {});
  }
}

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Form(
        key: widget.formKey,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: 100,
              child: Column(
                children: [
                  FittedBox(
                    fit: BoxFit.contain,
                    child: Text(
                      !isRTL
                          ? '(${widget.product.packageQuantity}) ${widget.product.packingName}'
                          : '(${widget.product.packageQuantity}) ${widget.product.packingRtlName}',
                      style: const TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const SizedBox(height: 4),
                  TextFormField(
                    keyboardType: const TextInputType.numberWithOptions(
                      decimal: true,
                      signed: true,
                    ),
                    inputFormatters: const <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly
                    ],
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    textInputAction: TextInputAction.next,
                    autofocus: false,
                    onSaved: (newValue) => widget.onSavePQ(newValue!),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入内容';
                      }
                      if (int.parse(value) > widget.product.packageQuantity) {
                        return '值不正确';
                      }
                      return null;
                    },
                    onChanged: (_) => _updateErrorMessages(),
                    onFieldSubmitted: (_) => _updateErrorMessages(),
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),
                    decoration: const InputDecoration(
                      errorMaxLines: 1,
                      errorStyle: TextStyle(
                        color: Colors.transparent,
                        fontSize: 0,
                      ),
                      border: OutlineInputBorder(),
                      hintText: 'PQ',
                      filled: true,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(width: 10),
            SizedBox(
              width: 100,
              child: Column(
                children: [
                  FittedBox(
                    fit: BoxFit.contain,
                    child: Text(
                      !isRTL
                          ? '(${widget.product.unitQuantity}) ${widget.product.unitName}'
                          : '(${widget.product.unitQuantity}) ${widget.product.unitRtlName}',
                      style: const TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const SizedBox(height: 4),
                  TextFormField(
                    inputFormatters: const <TextInputFormatter>[
                      FilteringTextInputFormatter.digitsOnly
                    ],
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    keyboardType: const TextInputType.numberWithOptions(
                      decimal: false,
                      signed: false,
                    ),
                    autofocus: false,
                    onSaved: (newValue) => widget.onSaveUQ(newValue!),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入内容';
                      }
                      if (int.parse(value) > widget.product.unitQuantity) {
                        return '值不正确';
                      }
                      return null;
                    },
                    onChanged: (_) => _updateErrorMessages(),
                    onFieldSubmitted: (_) => _updateErrorMessages(),
                    textAlign: TextAlign.center,
                    style: const TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                    ),
                    decoration: const InputDecoration(
                      errorMaxLines: 1,
                      errorStyle: TextStyle(
                        color: Colors.transparent,
                        fontSize: 0,
                      ),
                      border: OutlineInputBorder(),
                      hintText: 'UQ',
                      filled: true,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      // 显示错误信息
      if (_errorMessages.isNotEmpty)
        Padding(
          padding: const EdgeInsets.only(top: 8.0),
          child: Text(
            _errorMessages.join('\n'),
            style: const TextStyle(
              color: Colors.red,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      // 提交按钮
      ElevatedButton(
        onPressed: () {
          final formState = widget.formKey.currentState;
          if (formState != null) {
            formState.validate();
            _updateErrorMessages();
            if (_errorMessages.isEmpty) {
              formState.save();
              // 执行提交逻辑
            }
          }
        },
        child: const Text('提交'),
      ),
    ],
  );
}

关键说明 #

• 你已经通过errorStyle隐藏了输入框下方的默认错误提示，这部分保持不变
• 通过_updateErrorMessages方法统一收集所有字段的错误信息
• 输入框的onChanged和onFieldSubmitted确保用户交互时实时更新错误展示
• 提交按钮中先验证表单再更新错误列表，保证提交时的错误也能被捕获

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