Flutter PageView中如何为图片设置圆角并保留原始宽高比

核心问题原因 #

• 层级顺序错误：margin属性放在了ClipRRect内部的容器上，导致裁剪范围包含了边距区域，圆角无法作用在图片边缘
• 约束传递失效：PageView子项默认会拉伸填满可用空间，单独给Image设置固定高度不会生效，父容器没有给图片传递正确的布局约束
• 图片适配属性缺失：未配置Image的fit属性，无法保证图片按原始宽高比适配容器

修复代码 #

调整post方法的布局层级，同时配置图片适配属性即可：

Widget post(Post post) {
  return Container(
    // 边距移到ClipRRect外层，避免影响裁剪范围
    margin: const EdgeInsets.only(right: 10),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20),
      // 保留红色背景可保留该Container，不需要可直接删除，ClipRRect直接包裹Image即可
      child: Container(
        color: Colors.red,
        child: Image.network(
          post.thumb,
          // 保留原始宽高比，等比例缩放至完全显示在容器内
          fit: BoxFit.contain,
          // 跟随父级约束自适应尺寸，无需写死固定高度
          height: double.infinity,
          width: double.infinity,
        ),
      ),
    ),
  );
}

可选调整 #

如果希望图片填充满整个容器，仅保留宽高比、裁剪超出部分，将fit属性改为BoxFit.cover即可。

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