Flutter中使用BoxFit.fill为何无法让图片填满空间？

直接给Image添加height: double.infinity属性，就能让它像ContainerCard里的红色容器一样，完全填满Row分配的空间，代码修改如下：

class ImageCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: IntrinsicHeight(
        child: Row(
          children: [
            Image.network(
              'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
              width: 100,
              height: double.infinity, // 新增这一行
              fit: BoxFit.fill,
            ),
            Expanded(
              child: Container(color: Colors.amber, height: 200)
            ),
          ],
        ),
      ),
    );
  }
}

原因说明 #

原代码中，IntrinsicHeight会将Row的高度设置为子项中的最大高度（也就是右侧200px的Container），但Image默认只会根据自身原始尺寸渲染。即使设置了BoxFit.fill，没有指定高度约束时，它只会在自身高度范围内拉伸宽度，不会主动占满父级的可用高度。添加height: double.infinity后，Image会强制继承Row的高度，配合BoxFit.fill就会完全填满100px宽、与右侧Container等高的空间，甚至会扭曲宽高比来适配容器。

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