Flutter中TextEditingController计算的面积未存入woodsArray求助

问题概述 #

使用ListView.builder管理多组输入框，其中area由length和breadth计算得出。界面上area显示正常，但打印woodsArray时仅存在wood_length和wood_breadth字段，wood_area未被存入。

错误原因 #

1. 控制器初始化逻辑错误：在ListView.builder的itemBuilder中每次构建条目时都添加新控制器，导致控制器数组长度远超woodsArray，引发索引混乱，且重复初始化会覆盖原有数据。
2. 计算结果未同步到数组：仅更新了woodAreaControllers的文本，未将计算出的area写入woodsArray；而area输入框的onChanged仅在手动修改时触发，自动计算场景不会执行该回调，导致数组缺失wood_area。
3. 初始计算逻辑无效：初始时控制器文本为空，那段计算area的代码根本不会执行，无法触发初始计算。

修改方案 #

1. 同步控制器与数组的初始化 #

不在itemBuilder中添加控制器，而是在新增woodsArray条目时，同步创建并添加对应的三个控制器，确保两者长度始终一致。

2. 联动计算并同步数组 #

在length和breadth输入框的onChanged回调中调用计算方法，同时更新area控制器的文本和woodsArray中的wood_area字段，无需依赖area输入框的onChanged（可将area输入框设为只读）。

3. 增加异常防护 #

对num.tryParse的结果做空值判断，避免解析失败引发空指针异常。

修改后代码示例 #

List<Map<String, dynamic>> woodsArray = [];
List<TextEditingController> woodlengthControllers = [];
List<TextEditingController> woodbreadthControllers = [];
List<TextEditingController> woodAreaControllers = [];

// 新增木材条目方法（需绑定到添加按钮的onPressed）
void addWoodItem() {
  setState(() {
    woodsArray.add({
      'wood_length': '',
      'wood_breadth': '',
      'wood_area': '',
    });
    woodlengthControllers.add(TextEditingController(text: ''));
    woodbreadthControllers.add(TextEditingController(text: ''));
    woodAreaControllers.add(TextEditingController(text: ''));
  });
}

// 计算面积并同步数据
void calculateArea(int index) {
  final lengthStr = woodlengthControllers[index].text;
  final breadthStr = woodbreadthControllers[index].text;
  
  if (lengthStr.isNotEmpty && breadthStr.isNotEmpty) {
    final length = num.tryParse(lengthStr);
    final breadth = num.tryParse(breadthStr);
    
    if (length != null && breadth != null) {
      final area = (length * breadth * 0.00001111).toStringAsFixed(2);
      setState(() {
        woodAreaControllers[index].text = area;
        woodsArray[index]['wood_area'] = area; // 同步到数组
      });
    }
  } else {
    setState(() {
      woodAreaControllers[index].text = '';
      woodsArray[index]['wood_area'] = '';
    });
  }
}

// ListView.builder实现
ListView.builder(
  padding: EdgeInsets.zero,
  shrinkWrap: true,
  itemCount: woodsArray.length,
  itemBuilder: (BuildContext context, int index) {
    return Row(
      children: [
        SizedBox(
          width: 110,
          child: TextFormField(
            controller: woodlengthControllers[index],
            style: formPrimaryTextStyle(context),
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
            ),
            onChanged: (val) {
              woodsArray[index]['wood_length'] = val;
              calculateArea(index);
            },
          ),
        ),
        const SizedBox(width: 8),
        SizedBox(
          width: 110,
          child: TextFormField(
            controller: woodbreadthControllers[index],
            style: formPrimaryTextStyle(context),
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
            ),
            onChanged: (val) {
              woodsArray[index]['wood_breadth'] = val;
              calculateArea(index);
            },
          ),
        ),
        const SizedBox(width: 8),
        SizedBox(
          width: 110,
          child: TextFormField(
            controller: woodAreaControllers[index],
            style: formPrimaryTextStyle(context),
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
            ),
            enabled: false, // 设为只读，避免手动修改
          ),
        ),
      ],
    );
  },
)

关键优化点 #

• 通过addWoodItem方法统一管理条目和控制器的添加，避免索引混乱。
• 每次修改length或breadth时自动计算area并同步到woodsArray，保证数据一致性。
• 将area输入框设为只读，防止用户手动修改导致数据不一致。
• 增加空值判断，提升代码稳定性。

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