如何在Flutter中旋转盒子并实现目标Clipper裁剪效果

以下是可直接实现上图波浪底部裁剪效果的自定义裁剪器代码，适配Flutter开发场景：

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    // 路径起点移动到左上角
    path.lineTo(0, size.height - 40);
    // 第一段波浪贝塞尔曲线
    Offset firstControlPoint = Offset(size.width / 4, size.height);
    Offset firstEndPoint = Offset(size.width / 2, size.height - 20);
    path.quadraticBezierTo(
      firstControlPoint.dx,
      firstControlPoint.dy,
      firstEndPoint.dx,
      firstEndPoint.dy,
    );
    // 第二段波浪贝塞尔曲线
    Offset secondControlPoint = Offset(size.width * 3 / 4, size.height - 60);
    Offset secondEndPoint = Offset(size.width, size.height - 20);
    path.quadraticBezierTo(
      secondControlPoint.dx,
      secondControlPoint.dy,
      secondEndPoint.dx,
      secondEndPoint.dy,
    );
    // 路径延伸到右上角后闭合
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

使用方法 #

调用时将自定义Clipper传入ClipPath组件即可：

ClipPath(
  clipper: WaveClipper(),
  child: Container(
    height: 220,
    color: Colors.lightBlue,
    // 可自由添加其他子组件内容
  ),
)

效果适配调整 #

如果渲染效果和你的预期不符，可直接修改对应参数调整：

• 调整贝塞尔曲线控制点的Y轴数值，即可修改波浪的凸起/凹陷幅度
• 修改size.height - 数值的具体数值，即可调整波浪距离容器底部的整体偏移高度
• 增减贝塞尔曲线的段数，即可调整波浪的数量

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