Flutter自定义贝塞尔曲线实现求助：如何达成目标曲线效果？

你想要实现的是顶部带有两条向下凹陷的半透明白色背景效果，现有代码的路径逻辑有误，导致效果异常。先看你的初始代码：

ClipPath(
    clipper: BackgroudCliper(),
    child: Container(
      height: 200,
      color: Colors.white.withOpacity(0.20),
    ),
  ),

Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height);
path.lineTo(size.width, size.height);
path.quadraticBezierTo(size.width / 20, size.height / 20, 0, size.height);
path.close();
return path;
}

问题分析 #

原代码的路径起点和贝塞尔曲线参数逻辑错误，而且只尝试绘制了一条曲线，无法实现双凹陷的效果。

修正后的代码 #

下面是能实现目标效果的自定义Clipper：

class BackgroundClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角开始
    path.moveTo(0, 0);
    
    // 第一条曲线：从左上角到中间偏左的凹陷点
    path.quadraticBezierTo(
      size.width * 0.25, // 控制点X：宽度的25%位置
      size.height * 0.3, // 控制点Y：高度的30%位置（控制凹陷深度）
      size.width * 0.5,  // 终点X：宽度中点
      size.height * 0.15, // 终点Y：高度的15%位置
    );
    
    // 第二条曲线：从中间偏左到右上角的凹陷点
    path.quadraticBezierTo(
      size.width * 0.75, // 控制点X：宽度的75%位置
      0, // 控制点Y：顶部（控制凹陷弧度）
      size.width,  // 终点X：右上角
      0, // 终点Y：右上角
    );
    
    // 连接右下角和左下角，闭合路径
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    
    return path;
  }

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

使用方式 #

直接替换你原来的BackgroudCliper即可，容器高度保持200就能得到类似目标效果：

ClipPath(
  clipper: BackgroundClipper(),
  child: Container(
    height: 200,
    color: Colors.white.withOpacity(0.2),
  ),
)

你可以调整贝塞尔曲线的控制点参数（比如size.width * 0.25、size.height * 0.3这些数值），来匹配图中曲线的弧度和凹陷深度。

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