Flutter中如何裁剪Widget？自定义Clipper未实现预期效果

你想要的是卡片右上角呈现斜切的效果，但当前的CardClipper路径绘制逻辑有误，导致裁剪效果不符合预期。

原代码的路径走向错误，无法形成右上角的斜切造型。以下是修正后的代码：

class CardClipper extends CustomClipper<Path> {
  // 自定义斜切幅度比例，可根据需求调整
  final double clipRatio;

  CardClipper({this.clipRatio = 0.2});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角开始绘制路径
    path.moveTo(0, 0);
    // 到右上角斜切的起始点（距离右侧为宽度的clipRatio比例）
    path.lineTo(size.width - size.width * clipRatio, 0);
    // 斜切到右侧的终点（距离顶部为高度的clipRatio比例）
    path.lineTo(size.width, size.height * clipRatio);
    // 连接到右下角
    path.lineTo(size.width, size.height);
    // 连接到左下角
    path.lineTo(0, size.height);
    // 闭合路径，完成裁剪区域
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // 仅当斜切比例变化时重新裁剪，优化性能
    if (oldClipper is CardClipper) {
      return clipRatio != oldClipper.clipRatio;
    }
    return true;
  }
}

代码说明： #

• 新增clipRatio参数，默认值0.2，你可以通过调整这个值来控制斜切的幅度，数值越大斜切越明显
• 路径按照左上角 → 右上角斜切起点 → 斜切终点 → 右下角 → 左下角的顺序绘制，最后闭合路径，这样就能精准实现右上角的斜切效果
• 优化了shouldReclip方法，避免不必要的重绘，提升性能

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