Flutter使用Image.asset抛出Rect argument contained a NaN值异常求助

• 最核心的问题是你给Image.asset设置了height: double.maxFinite，这个值代表无限大：

你外层FireChar组件的Container已经固定高度为75，但是内部Row组件不会给子元素提供明确的高度约束，Image拿到无限大的高度参数后，结合BoxFit.cover属性计算渲染尺寸时，就会出现非有限值（NaN/Infinity），触发你看到的一系列渲染报错。

• 第二个不合理的点是计数参数amount用了double类型，代表数量的参数应该用int类型更合理。
• 第三个布局逻辑问题：你当前的写法是循环生成多个Row，每个Row里放一张图，最终是纵向排列4张图，如果你需要的是横向排列，不需要给每个Image套Row和Column。

修改FireChar组件代码 #

import 'package:flutter/material.dart';

class FireChar extends StatelessWidget {

  // 要生成的角色数量改为int类型
  final int amount; 

  const FireChar({super.key, required this.amount});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 75,
      // 若需要横向排列多张图直接用Row即可，无需嵌套Column
      child: Row(
        children: [
          for (var i = 0; i < amount; i++) 
            Image.asset(
              'assets/images/characters/fire.png',
              fit: BoxFit.cover,
              // 高度设为小于等于父容器的75即可，可按需调整数值
              height: 70,
            ),
        ],
      ),
    );
  }
}

调整调用处的传参 #

因为amount已经改为int类型，原有传值4的代码无需改动，本身就是整数类型。如果需要纵向排列多张图，把组件内的外层Row改成Column即可，只要保证Image的高度是固定的有限值就不会触发报错。

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