Flutter中FractionallySizedBox出现NaN高度约束错误求助

错误根源 #

FractionallySizedBox的heightFactor或widthFactor被赋值为NaN（非数字），导致组件无法计算有效布局约束，触发performLayout阶段的断言错误。常见触发场景：

• 计算因子时出现除以0的情况（比如用交易总金额为0的数据计算占比）
• 用于计算因子的变量未初始化（null转换为数字后变为NaN）
• 数据逻辑错误导致计算结果异常

修复方案 #

1. 检查并修复因子计算逻辑 #

打开chart_bar.dart，定位到FractionallySizedBox的使用代码，重点核查heightFactor的计算逻辑：

// 错误示例：未处理分母为0的情况
final heightFactor = transaction.amount / totalAmount;

// 修复后：加入分母为0的安全判断
final heightFactor = totalAmount == 0 ? 0.0 : transaction.amount / totalAmount;

2. 给因子添加NaN兜底处理 #

如果无法完全预判计算异常，直接给因子设置兜底值，避免传入NaN：

FractionallySizedBox(
  // 若计算出的因子是NaN，默认使用0.0
  heightFactor: calculatedFactor.isNaN ? 0.0 : calculatedFactor,
  child: YourChildWidget(),
)

3. 确保父容器尺寸明确（可选） #

如果父容器本身没有确定的尺寸约束，也可能导致FractionallySizedBox无法正确计算比例。可以用SizedBox或LayoutBuilder给父容器明确尺寸：

LayoutBuilder(
  builder: (context, constraints) {
    // 基于父容器的确定尺寸计算因子
    final validFactor = calculateValidFactor(constraints.maxHeight);
    return FractionallySizedBox(
      heightFactor: validFactor.isNaN ? 0.0 : validFactor,
      child: ...,
    );
  },
)

验证步骤 #

1. 修复代码后重新运行应用，确认布局错误日志消失
2. 测试边界场景（无交易数据、总金额为0等），确保组件正常渲染

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