Flutter Web开发中Row布局下ImageIcon挤压显示异常的修复咨询

图标挤压变形来自两个实际布局的小问题：

• 你用的ImageIcon没有手动传入固定的size参数，会自动适配父容器分配的剩余空间。你的外层Container是按屏幕宽度比例设置的固定宽度，里面的文本“1000”会占掉一部分横向空间，剩下的宽度不够容纳原本50*50的正方形图标，图标就会被横向拉扁。
• 内部嵌套的Row没有限制主轴尺寸，还用文本后面加空格的方式凑组件间距，布局遇到横向空间不足时，会优先挤压没有固定尺寸约束的图标组件，最终导致显示异常。

• 给自定义图标锁定正方形尺寸，杜绝拉伸
  不要让图标跟着父布局的剩余空间自动适配，直接给图标传入和外层容器高度匹配的固定尺寸，保证宽高完全相等。比如外层Container高度是height/25，可以把图标尺寸设为容器高度的60%，从根源上避免变形。
• 修正内部Row的布局逻辑
  把原来靠Text后面加空格凑出的“1000”和图标的间距，换成固定宽度的SizedBox做间隔；同时给内部Row加上mainAxisSize: MainAxisSize.min，不让Row无意义占满整个容器宽度，减少子组件被挤压的概率。
• 换用更稳定的Image.asset加载自定义图标
  ImageIcon本质是为内置矢量图标设计的封装组件，对自定义位图png的适配性较差。直接用Image.asset加载你的50*50素材时，手动设置相等的宽高，配合BoxFit.contain做适配；如果需要把图标渲染成白色，用colorFilter实现，比ImageIcon自带的color属性显示更稳定，不会出现边缘裁剪、颜色溢出的问题。
• 加一层兜底防挤压
  后续如果需要动态修改文本长度，可以给图标组件包一层Flexible，保证横向空间不足时优先压缩多余的间隔空间，而不是直接挤压图标本身的尺寸。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: height / 25,
      width: width / 18,
      decoration: BoxDecoration(
        border: Border.all(width: 2, color: CustomColours.lightBlue),
        borderRadius: const BorderRadius.all(Radius.circular(10))
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('1000'),
          // 固定间距替代文本空格
          const SizedBox(width: 8),
          // 自定义图标固定正方形尺寸
          Image.asset(
            'lib/assets/fonts/icons/Group 1.png',
            width: height / 25 * 0.6,
            height: height / 25 * 0.6,
            fit: BoxFit.contain,
            // 渲染为白色的颜色滤镜
            colorFilter: const ColorFilter.mode(Colors.white, BlendMode.srcIn),
          )
        ],
      ),
    ),
    Container(
      height: height / 25,
      child: FittedBox(
        fit: BoxFit.fitHeight,
        child: IconButton(
          icon: const Icon(
            Icons.add_circle_outline,
            color: CustomColours.lightBlue,
          ),
          onPressed: () => print('add'),
        ),
      ),
    ),
  ],
)

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