Flutter中自定义ClipPath实现指定图形求助

嘿，我看你已经写好了一个自定义Clipper来打造特殊形状，我帮你把代码规整好，顺便拆解下它的逻辑：

class CustomShapeBar extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    double height = size.height;
    double width = size.width;
    
    // 从左上角画到左侧指定高度位置
    path.lineTo(0, height - 230);
    // 绘制二次贝塞尔曲线，打造底部中间的弧形
    path.quadraticBezierTo(width / 2, height, width, height - 230);
    // 从右侧指定高度位置画到右上角
    path.lineTo(width, 0);
    // 闭合路径，形成完整形状
    path.close();
    
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

代码逻辑说明： #

• 这个Clipper会生成一个底部中间向下突出弧形的形状：
  1. 先从控件的左上角(0,0)连线到左侧的(0, height-230)位置
  2. 用二次贝塞尔曲线连接左右两侧的height-230位置，控制点设在底部中心(width/2, height)，这样就拉出了中间的弧形
  3. 再从右侧的(width, height-230)连线到右上角(width,0)，最后闭合路径形成完整轮廓

调整形状的小技巧： #

• 如果想让弧形更突出/平缓，可以修改height - 230里的230：数值越小，弧形向下凸得越多；数值越大，弧形越接近直线
• 要是想让弧形向上凹，可以把贝塞尔曲线的控制点改成(width/2, height - 100)这类比height小的数值，调整数值就能控制凹陷程度

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