Flutter使用CurveClipper裁剪Container时如何将底部曲边调整为顶部曲边

解决方案 #

你只需要修改CurveClipper类中getClip方法的路径绘制逻辑即可，核心是把贝塞尔曲线的绘制位置从容器底部移到顶部：

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    int curveHeight = 40;
    // 控制点调整到顶部中心外侧，保证曲边形状和原底部效果一致
    Offset controlPoint = Offset(size.width / 2, -curveHeight);
    Offset endPoint = Offset(size.width, curveHeight);

    Path path = Path()
      ..lineTo(0, curveHeight)
      ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();

    return path;
  }

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

原有ClipPath的使用代码不需要做任何修改，直接替换CurveClipper的实现即可生效。

逻辑说明 #

Flutter的Canvas坐标系原点在组件左上角，y轴向下为正方向：

• 原代码的贝塞尔曲线控制点、起止点都设置在容器底部区域，所以曲边出现在底部
• 调整后的代码将贝塞尔曲线的绘制区域移到容器顶部，绘制完曲边后再闭合容器剩下的矩形区域即可

如果你需要的是顶部向下凹的曲边，只需要把控制点的y坐标改为curveHeight即可：

Offset controlPoint = Offset(size.width / 2, curveHeight);

内容的提问来源于stack exchange，提问作者N.Armada