如何将TextFormField的validator返回值逐行追加到TextField且不清除原有内容

实现步骤 #

• 首先使用StatefulWidget承载页面，在State类中定义表单key和两个文本编辑控制器，分别用于控制输入框和只读展示框的内容
• 把原validator中的校验逻辑抽离为独立方法，既可以给表单做校验用，也可以主动调用获取校验返回的提示文本
• 修改按钮点击逻辑，点击时先触发表单校验（用来在输入框下方显示错误提示），再拿到校验返回值，拼接换行符后追加到只读展示框的原有内容末尾
• 组件销毁时释放控制器避免内存泄漏

完整修改后的代码示例 #

//  State类中声明变量部分
final _formKey = GlobalKey<FormState>();
// 控制输入TextFormField的控制器
final _inputController = TextEditingController();
// 控制只读TextField的控制器
final _readOnlyController = TextEditingController();
// 你的原有变量girdi
final String girdi = "你预设的对比值";

// 抽离的独立校验方法
String? _validateInput(String? value) {
  if (value == null || value.isEmpty) {
    return AppLocalizations.of(context)!.returnvalue1;
  }
  if (value == girdi) {
    return AppLocalizations.of(context)!.returnvalue2;
  } else {
    return AppLocalizations.of(context)!.returnvalue3;
  }
}

@override
void dispose() {
  // 销毁控制器
  _inputController.dispose();
  _readOnlyController.dispose();
  super.dispose();
}

// 构建方法里的组件部分
Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _inputController, // 绑定输入控制器
        decoration: InputDecoration(
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.green,
              width: 2.0,
            ),
          ),
          prefixText: 'test: ',
          prefixStyle: TextStyle(color: Colors.green, fontSize: 20),
          errorStyle: TextStyle(
            backgroundColor: Colors.black,
            color: Colors.green,
            fontSize: 18
          )
        ),
        style: TextStyle(
          fontSize: 18,
          color: Colors.green,
          backgroundColor: Colors.black
        ),
        validator: _validateInput, // 直接用抽离的校验方法
      ),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16.0),
        child: ElevatedButton(
          onPressed: () {
            // 触发表单校验，显示输入框下方的错误提示
            _formKey.currentState!.validate();
            // 获取校验结果
            final validateMsg = _validateInput(_inputController.text);
            if (validateMsg != null) {
              // 拼接内容，原有内容非空就先加换行
              final newContent = _readOnlyController.text.isEmpty 
                  ? validateMsg 
                  : '${_readOnlyController.text}\n$validateMsg';
              // 更新只读框内容
              _readOnlyController.value = TextEditingValue(
                text: newContent,
                selection: TextSelection.collapsed(offset: newContent.length)
              );
            }
          },
          child: Text(AppLocalizations.of(context)!.addTextToNewLine),
        ),
      ),
      // 只读展示TextField
      TextField(
        controller: _readOnlyController, // 绑定只读控制器
        readOnly: true,
        showCursor: false,
        style: TextStyle(
          fontSize: 18,
          color: Colors.green,
          backgroundColor: Colors.black
        ),
      )
    ],
  )
)

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