Flutter两个TextField输入数值实时求和并展示到第三个TextField的问题

存在的问题 #

• 未给两个输入TextField绑定输入监听事件，_calculation计算方法不会随用户输入自动触发，计算逻辑从未执行
• 错误使用hintText属性承载计算结果：hintText是输入框无内容时显示的灰色提示文本，优先级远低于输入框本身的文本值，不适合用来展示正式结果
• 直接使用int.parse转换输入内容，未处理空输入、非数字输入的场景，一旦输入不符合格式会直接抛出异常导致崩溃

必要修复步骤 #

1. 绑定输入监听 #

在页面初始化阶段给两个输入用的TextEditingController添加监听，输入变化时自动触发计算，页面销毁时记得移除监听避免内存泄漏：

@override
void initState() {
  super.initState();
  // 绑定输入监听
  _quantityController.addListener(_calculation);
  feedPrice.addListener(_calculation);
}

@override
void dispose() {
  // 移除监听
  _quantityController.removeListener(_calculation);
  feedPrice.removeListener(_calculation);
  // 销毁控制器
  _quantityController.dispose();
  feedPrice.dispose();
  super.dispose();
}

2. 优化计算逻辑，增加异常兼容 #

void _calculation() {
  final quantityStr = _quantityController.text.trim();
  final priceStr = feedPrice.text.trim();
  int finalTotal = 0;
  // 仅当两个输入都不为空时尝试计算
  if (quantityStr.isNotEmpty && priceStr.isNotEmpty) {
    final quantity = int.tryParse(quantityStr) ?? 0;
    final price = int.tryParse(priceStr) ?? 0;
    finalTotal = quantity * price;
  }
  setState(() {
    _total = finalTotal;
  });
}

3. 修正结果TextField的实现 #

新增专门的结果控制器承载计算值，不要用hintText展示结果：

// 页面内先定义结果控制器
final _resultController = TextEditingController();

// 计算逻辑同步更新结果控制器的内容
void _calculation() {
  // 原有计算逻辑...
  setState(() {
    _total = finalTotal;
    _resultController.text = _total.toString();
  });
}

// 修改TextField代码
TextField(
  readOnly: true,
  textAlign: TextAlign.center,
  controller: _resultController,
  decoration: const InputDecoration(
    hintText: "计算结果", // hint仅作为无值时的提示文案
  ),
)

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