Flutter读取Firebase数值做减法显示到ListTile结果异常问题

应用运行效果截图

开发Flutter应用时，需要对从Firebase获取的两个字段值做减法运算，将最终计算结果展示在ListTile组件的「Total In Service（在用设备总数）」条目下。从Firebase读取到的两个字段值如下：

• Total Equipment（设备总数）：80.0
• Total OOS（停用设备总数）：20.0

预期计算得到的在用设备总数为60.0，但实际页面仅展示字符串拼接内容Total In Service: 80.0 - 20.0，未执行数值减法运算。

原有问题代码中对应出错的部分如下：

ListTile(
  title: const Text('Total In Service'),
  subtitle: Text(
    'Total In Service: ${data['Total Equipment']} - ${data['Total OOS']}'),
),

字符串插值语法里直接写入两个变量和减号字符时，Dart只会将变量值转为字符串、和普通字符-直接拼接，不会自动识别并执行算术运算。

在字符串插值内部先完成数值类型转换、执行减法计算，再将最终计算结果拼入展示文本，修改后的代码如下：

ListTile(
  title: const Text('Total In Service'),
  subtitle: Text(
    // 显式转数值类型后做减法，避免类型异常
    'Total In Service: ${(data['Total Equipment'] as num) - (data['Total OOS'] as num)}'
  ),
),

优化提示：如果需要固定展示小数位数，可以在计算结果后调用toStringAsFixed(1)，例如${((data['Total Equipment'] as num) - (data['Total OOS'] as num)).toStringAsFixed(1)}，即可固定展示1位小数的结果。

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