Flutter自定义TextFormField输入值自动计算总价并同步到另一字段问题

• 自定义CustomFormField组件未将传入的onChanged回调绑定到内部TextFormField上，导致输入变更时上层的回调逻辑完全不会触发。
• EditItemForm中给CustomFormField传onChanged时写法错误：onChanged: (value) => _onChange只是返回了_onChange函数的引用，并未实际执行该函数，输入变更时不会触发计算逻辑。
• 计算总价的逻辑中，仅更新了_total变量，没有同步给_totalController赋值，所以total输入框不会同步更新；另外额外加的textListener监听器中没有调用setState，就算_total值变了UI也不会刷新。
• 缺少字符串转int的异常校验，当输入框内容为空、非数字时会直接抛出格式异常导致崩溃。

1. 修复CustomFormField组件 #

给内部的TextFormField加上onChanged属性，把传入的回调透传进去：

@override
Widget build(BuildContext context) {
  return TextFormField(
    // 原有属性全部保持不变
    onChanged: _onChanged, // 新增这行，透传输入变更回调
    validator: (value) => _validator(value!),
    decoration: InputDecoration(
      // 原有样式配置不变
    ),
  );
}

2. 优化总价计算逻辑 #

修改_onChange方法，增加异常校验，同时同步更新_total和_totalController，不需要额外的listener监听，initState里可以删掉_quantityController.addListener(textListener);和对应的textListener方法：

void _onChange() {
  // 增加异常校验，空值、非数字默认转换为0，避免崩溃
  int price = int.tryParse(_priceController.text) ?? 0;
  int quantity = int.tryParse(_quantityController.text) ?? 0;
  setState(() {
    _total = price * quantity;
    // 同步更新只读total输入框的内容
    _totalController.text = _total.toString();
  });
}

3. 修正onChanged的传参写法 #

把价格、采购数量输入框的onChanged改成正确的调用写法：

// 价格输入框
CustomFormField(
  // 原有属性不变
  onChanged: (value) => _onChange(),
),
// 采购数量输入框
CustomFormField(
  // 原有属性不变
  onChanged: (value) => _onChange(),
),

参数匹配的情况下也可以直接简写为onChanged: _onChange。

修改完成后输入采购数量/价格时就会实时计算总价，同时同步到只读的total输入框和下方的Text组件中。

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