Flutter中如何借助两个TextFormField控制器实现输入整数的相加运算

• 报错的根本原因完全来自两个认知偏差：
  • 对TextEditingController的能力认知错误：它天生只负责管理输入框的字符串文本内容，从设计上就无法直接承载int类型值，更不能把它的.text属性（本质是String）直接强转为int，这种跨类型强转在Dart运行时必然抛出类型不兼容异常
  • 输入配置逻辑不严谨：第一个输入框设置纯文本输入类型，没有限制数字输入，不仅容易让非数字字符进入后续计算流程，也会增加数值转换的失败概率
• 旧逻辑里的典型错误写法：int firstVal = firstController.text as int; —— 相当于直接把字符串当整数用，是完全不符合Dart类型规则的写法

1. 控制器初始化阶段 #

控制器只负责管理文本字符串，求和计算结果单独用独立状态变量存储，绝对不要把int值塞给控制器：

// 状态变量定义
final TextEditingController inputAController = TextEditingController();
final TextEditingController inputBController = TextEditingController();
int totalSum = 0; // 计算结果单独存，不要绑定给控制器

2. 输入框配置优化 #

两个输入框统一使用数字键盘，增加输入规则限制从根源减少非法输入：

// 第一个数字输入框
TextFormField(
  controller: inputAController,
  keyboardType: TextInputType.number, // 替换原来的纯文本输入类型，两个框保持一致
  inputFormatters: [FilteringTextInputFormatter.digitsOnly], // 仅允许输入数字字符
  decoration: const InputDecoration(hintText: '请输入第一个数字（例：45）'),
),
const SizedBox(height: 16),
// 第二个数字输入框
TextFormField(
  controller: inputBController,
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  decoration: const InputDecoration(hintText: '请输入第二个数字（例：5）'),
),

3. 修正数值转换逻辑 #

替换原来的硬强转写法，使用Dart提供的安全字符串转int方法，增加空值、非法输入的兜底逻辑：

void onCalculateTriggered() {
  // 安全解析：空值/非数字内容自动兜底为0，不会触发运行时异常
  final valA = int.tryParse(inputAController.text.trim()) ?? 0;
  final valB = int.tryParse(inputBController.text.trim()) ?? 0;

  setState(() {
    totalSum = valA + valB;
  });
}

4. 结果展示 #

在界面上把计算出的totalSum渲染出来：

// 计算结果展示组件
Padding(
  padding: const EdgeInsets.symmetric(vertical: 24),
  child: Text(
    '两数求和结果：$totalSum',
    style: const TextStyle(fontSize: 18),
  ),
),
// 触发计算的按钮
ElevatedButton(
  onPressed: onCalculateTriggered,
  child: const Text('计算求和'),
)

关键提醒：如果需要给控制器赋值数字值，必须先把数字转成字符串再赋值，正确写法为inputAController.text = 45.toString()，直接给text赋int值同样会触发类型报错。

按照上述逻辑实现后，当两个输入框分别输入45、5时，会正确解析为整数45和5，最终输出求和结果50，全程不会出现TextEditingController的类型承载报错。

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