如何在Flutter中实现四角不同圆角的图片裁剪？求最优方案

方案一：使用ClipRRect + BorderRadius.only（推荐，简单高效） #

这是Flutter原生提供的最简便方案，完全不需要额外资源，性能最优。直接通过BorderRadius.only分别设置四个角的圆角半径，再用ClipRRect包裹图片即可。

示例代码：

ClipRRect(
  // 分别设置四个角的圆角半径，按需调整数值
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(16),
    topRight: Radius.circular(24),
    bottomRight: Radius.circular(8),
    bottomLeft: Radius.circular(32),
  ),
  child: Image.network(
    'https://example.com/your-image.jpg',
    fit: BoxFit.cover,
    width: 300,
    height: 200,
  ),
)

方案二：自定义CustomClipper实现复杂裁剪（适用于非标准圆角场景） #

如果你的设计需求超出了普通圆角（比如带有自定义曲线的角），可以通过ClipPath配合自定义CustomClipper来实现更灵活的裁剪路径。

示例代码：

class CustomCornerClipper extends CustomClipper<Path> {
  final double topLeftRadius;
  final double topRightRadius;
  final double bottomRightRadius;
  final double bottomLeftRadius;

  CustomCornerClipper({
    required this.topLeftRadius,
    required this.topRightRadius,
    required this.bottomRightRadius,
    required this.bottomLeftRadius,
  });

  @override
  Path getClip(Size size) {
    final path = Path();
    final width = size.width;
    final height = size.height;

    // 起始点：左上角圆角结束位置
    path.moveTo(topLeftRadius, 0);
    // 顶部直线到右上角圆角起始位置
    path.lineTo(width - topRightRadius, 0);
    // 右上角圆角
    path.quadraticBezierTo(width, 0, width, topRightRadius);
    // 右侧直线到右下角圆角起始位置
    path.lineTo(width, height - bottomRightRadius);
    // 右下角圆角
    path.quadraticBezierTo(width, height, width - bottomRightRadius, height);
    // 底部直线到左下角圆角起始位置
    path.lineTo(bottomLeftRadius, height);
    // 左下角圆角
    path.quadraticBezierTo(0, height, 0, height - bottomLeftRadius);
    // 左侧直线回到左上角圆角结束位置
    path.lineTo(0, topLeftRadius);
    // 左上角圆角
    path.quadraticBezierTo(0, 0, topLeftRadius, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomCornerClipper oldClipper) {
    return oldClipper.topLeftRadius != topLeftRadius ||
        oldClipper.topRightRadius != topRightRadius ||
        oldClipper.bottomRightRadius != bottomRightRadius ||
        oldClipper.bottomLeftRadius != bottomLeftRadius;
  }
}

// 使用方式
ClipPath(
  clipper: CustomCornerClipper(
    topLeftRadius: 16,
    topRightRadius: 24,
    bottomRightRadius: 8,
    bottomLeftRadius: 32,
  ),
  child: Image.network(
    'https://example.com/your-image.jpg',
    fit: BoxFit.cover,
    width: 300,
    height: 200,
  ),
)

为什么不推荐叠加PNG边框的方案？ #

• 性能损耗：额外的PNG图层会增加渲染开销，尤其是在列表中大量使用时更明显。
• 适配问题：不同屏幕尺寸下，PNG边框可能出现拉伸变形，需要多套适配资源。
• 维护成本：如果需要调整圆角大小，必须重新制作PNG图片，不如代码配置灵活。

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