Flutter开发中显示图片时如何固定裁剪网络图片的顶部与底部

你可以通过以下两种方案实现指定固定数值裁剪图片上下部分，均兼容网络图片场景，且仅在渲染阶段生效不会修改原始图片资源：

方案1：自定义裁剪器（灵活度最高，支持上下独立指定裁剪像素） #

第一步：定义自定义裁剪类 #

class VerticalCropClipper extends CustomClipper<Rect> {
  // 顶部需要裁剪的像素值
  final double topCropPx;
  // 底部需要裁剪的像素值
  final double bottomCropPx;

  VerticalCropClipper({required this.topCropPx, required this.bottomCropPx});

  @override
  Rect getClip(Size size) {
    // 计算保留的区域：去掉顶部、底部指定裁剪范围
    return Rect.fromLTRB(0, topCropPx, size.width, size.height - bottomCropPx);
  }

  @override
  bool shouldReclip(covariant VerticalCropClipper oldClipper) {
    return topCropPx != oldClipper.topCropPx || bottomCropPx != oldClipper.bottomCropPx;
  }
}

第二步：结合你的现有代码使用 #

用ClipRect包裹你原来的容器，直接指定裁剪数值即可：

// 示例：裁剪顶部10像素、底部10像素
ClipRect(
  clipper: VerticalCropClipper(topCropPx: 10, bottomCropPx: 10),
  child: Container(
    height: 200,
    width: double.infinity,
    decoration: BoxDecoration(
      image: DecorationImage(
        fit: BoxFit.cover,
        alignment: FractionalOffset.topCenter,
        image: NetworkImage(articles[index].imageUrl!),
      ),
      borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(6),
          topRight: Radius.circular(6)),
    ),
  ),
)

方案2：无自定义类实现（适合固定裁剪数值的场景） #

不需要额外定义裁剪类，通过OverflowBox实现上下裁剪：

SizedBox(
  // 最终显示高度 = 原容器高度 - 顶部裁剪值 - 底部裁剪值，示例中原200高，上下各裁10就设180
  height: 180,
  width: double.infinity,
  child: OverflowBox(
    alignment: Alignment.center,
    maxHeight: 200, // 对应原图片容器的高度
    child: Container(
      height: 200,
      width: double.infinity,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          alignment: FractionalOffset.topCenter,
          image: NetworkImage(articles[index].imageUrl!),
        ),
        borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(6),
            topRight: Radius.circular(6)),
      ),
    ),
  ),
)

两种方案性能损耗都极低，不需要提前下载完整图片做处理，完全适配网络图片加载场景。

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