Flutter：让Expanded组件列表中所有图片保持相同缩放比例

方法一：用AspectRatio固定宽高比 #

给Image套一层AspectRatio组件，强制图片容器保持设定的宽高比，配合BoxFit.contain就能让所有图片按相同比例缩小，同时完整保留原图外观。

修改后的代码：

Widget item(String value, String imageLocation) => Row(children: [
  Expanded(
    child: AspectRatio(
      // 按需调整宽高比，比如1:1对应正方形
      aspectRatio: 1,
      child: Image.asset(
        'assets/images/$imageLocation.png',
        fit: BoxFit.contain,
      ),
    ),
  ),
  Expanded(
    child: Text(
      value,
      textAlign: TextAlign.center,
      style: const TextStyle(
        color: Colors.black54,
      ),
    ),
  ),
]);

• AspectRatio会让图片容器在Expanded分配的宽度内，自动按比例计算高度，保证所有图片尺寸比例一致。
• BoxFit.contain确保图片完整显示，不会拉伸变形，自动缩小到容器范围内。

方法二：用ConstrainedBox限制最大尺寸 #

如果需要精准控制图片的最大显示大小，避免在大屏幕上过度放大，可以用ConstrainedBox包裹Image：

Widget item(String value, String imageLocation) => Row(children: [
  Expanded(
    child: ConstrainedBox(
      constraints: const BoxConstraints(
        maxWidth: 60,
        maxHeight: 60,
      ),
      child: Image.asset(
        'assets/images/$imageLocation.png',
        fit: BoxFit.contain,
        alignment: Alignment.center,
      ),
    ),
  ),
  Expanded(
    child: Text(
      value,
      textAlign: TextAlign.center,
      style: const TextStyle(
        color: Colors.black54,
      ),
    ),
  ),
]);

• ConstrainedBox给图片设定了最大宽高，Expanded保证它和Text占相同宽度，但图片不会超出设定的尺寸上限，同时保持原图比例。

方法三：动态适配屏幕宽度 #

如果需要图片尺寸随屏幕自适应，可以通过MediaQuery获取屏幕宽度，计算出目标尺寸：

Widget item(String value, String imageLocation, BuildContext context) => Row(children: [
  Expanded(
    child: Image.asset(
      'assets/images/$imageLocation.png',
      width: MediaQuery.of(context).size.width * 0.2,
      height: MediaQuery.of(context).size.width * 0.2,
      fit: BoxFit.contain,
    ),
  ),
  Expanded(
    child: Text(
      value,
      textAlign: TextAlign.center,
      style: const TextStyle(
        color: Colors.black54,
      ),
    ),
  ),
]);

这种方式能让图片在不同尺寸的屏幕上保持一致的相对大小，同时固定宽高比。

关键注意点 #

• 不要直接给Image设置固定宽高后套Expanded，这会破坏Expanded的空间分配逻辑，导致图片尺寸不受Row约束。
• 优先选择BoxFit.contain而非BoxFit.fill，后者会拉伸图片变形，前者能完整保留原图比例。

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