Flutter如何实现横向Clipper裁剪以制作自定义特殊形状卡片

调整方案 #

你当前的代码仅处理了上下两条水平边的波浪裁剪，要实现左右垂直边的裁剪效果，将路径绘制逻辑调整为沿Y轴遍历，为左右边添加贝塞尔曲线绘制规则即可，以下是可直接运行的代码：

Path path = Path();
double y = 0;
double x = 0.0;
// 左侧波浪向内凹陷的距离，可自行调整比例
double leftControlX = size.width * .05;
// 垂直方向步长，数值越小波浪越密集
double increment = size.height / 12;

// 绘制左侧波浪边
while (y < size.height) {
  path.quadraticBezierTo(
      leftControlX, y + increment / 2, x, y + increment);
  y += increment;
}

// 移动到右下角
path.lineTo(size.width, size.height);

// 绘制右侧波浪边
y = size.height;
x = size.width;
// 右侧波浪向内凹陷的距离
double rightControlX = size.width * .95;
while (y > 0) {
  path.quadraticBezierTo(
      rightControlX, y - increment / 2, x, y - increment);
  y -= increment;
}

path.close();
return path;

如果需要同时保留上下边和左右边的波浪裁剪效果，把原有上下边的绘制逻辑和上述左右边的逻辑结合即可，调整控制点的比例就能控制波浪的凹陷深度。

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