Flutter中图片尺寸无法缩小，如何修改图片width与height？

原因分析 #

你的图片尺寸修改不生效，主要是以下几个约束冲突或配置问题导致的：

• 外层Tab组件的固定高度限制，会压缩内部子组件的实际可用空间
• CachedNetworkImage使用的BoxFit.contain仅在图片超过容器时才会缩小，小图不会主动适配容器尺寸
• Column内的Expanded会抢占剩余空间，挤压图片容器的尺寸

具体修复步骤 #

1. 调整或移除Tab的固定高度 #

展示代码里的Tab设置了固定高度，如果不需要这个限制，直接删除该属性，让Tab自适应子组件尺寸：

Tab(
  // 移除该行：height: Dimensions.height70 + 5,
  child: TabsFreelancerContainer(
    image: e.photo,
    tittle: Get.put(AppController()).isEnglish() ? e.enName : e.arName,
  ),
)

如果必须保留Tab高度，要确保其值大于等于TabsFreelancerContainer内部组件的总高度（图片容器高度 + 间距 + 文本高度）。

2. 修改CachedNetworkImage的适配方式 #

如果需要强制图片缩放到容器尺寸，将BoxFit.contain改为BoxFit.cover（保持比例填充容器）或直接给图片设置固定尺寸：

// 方式一：修改适配方式
CachedNetworkImage(
  imageUrl: image,
  fit: BoxFit.cover,
  placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

// 方式二：直接设置图片尺寸
CachedNetworkImage(
  imageUrl: image,
  width: Dimensions.width40,
  height: Dimensions.height40,
  fit: BoxFit.contain,
  placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
  errorWidget: (context, url, error) => const Icon(Icons.error),
)

3. 移除文本组件的Expanded #

Expanded会挤压图片容器的空间，直接删除该包裹：

// 替换原Expanded包裹的代码
SmallText(text: tittle, color: Colors.black, size: Dimensions.font13)

4. 调整图片容器的尺寸 #

直接修改Container的height和width为你需要的数值：

Container(
  height: Dimensions.height40,
  width: Dimensions.width40,
  decoration: BoxDecoration(
    boxShadow: <BoxShadow>[
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        blurRadius: Dimensions.radius10,
        offset: const Offset(0.0, 5),
      )
    ],
    borderRadius: BorderRadius.circular(Dimensions.radius10),
    color: Colors.white,
  ),
  child: CachedNetworkImage(...),
)

修复后的完整TabsFreelancerContainer代码 #

class TabsFreelancerContainer extends StatelessWidget {
  final String image, tittle;

  const TabsFreelancerContainer({Key? key, required this.image, required this.tittle}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          height: Dimensions.height40,
          width: Dimensions.width40,
          decoration: BoxDecoration(
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black.withOpacity(0.5),
                blurRadius: Dimensions.radius10,
                offset: const Offset(0.0, 5),
              )
            ],
            borderRadius: BorderRadius.circular(Dimensions.radius10),
            color: Colors.white,
          ),
          child: CachedNetworkImage(
            imageUrl: image,
            fit: BoxFit.cover,
            placeholder: (context, url) => const Center(child: CircularProgressIndicator()),
            errorWidget: (context, url, error) => const Icon(Icons.error),
          ),
        ),
        SizedBox(
          height: 5.h,
        ),
        SmallText(text: tittle, color: Colors.black, size: Dimensions.font13)
      ],
    );
  }
}

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