如何在Flutter中绘制指定形状？使用CustomClipper未达预期效果

你需要的是底部中间向上凹陷的形状，原代码的路径逻辑错误，导致输出不符。以下是修正后的代码及说明：

修正后的代码 #

int curveHeight = 20;

Path path = Path()
  // 从左上角(0,0)到左下角(0, size.height)
  ..lineTo(0, size.height)
  // 绘制底部中间向上凹的二次贝塞尔曲线：从左下角到右下角，控制点在中间上方
  ..quadraticBezierTo(
    size.width / 2, size.height - curveHeight,
    size.width, size.height,
  )
  // 从右下角(size.width, size.height)到右上角(size.width, 0)
  ..lineTo(size.width, 0)
  // 闭合路径回到左上角
  ..close();

原代码问题分析 #

1. 路径起点错误：原代码从(0, size.height - curveHeight)开始，跳过了左下角的垂直边，导致形状左侧不完整
2. 贝塞尔曲线的终点和控制点逻辑错误：原代码的贝塞尔终点是(size.width, size.height - curveHeight)，控制点在底部下方，绘制出的是向右下方凸的曲线，而非底部中间向上凹的效果
3. 路径闭合前的线段错误：原代码从贝塞尔终点直接连到右上角(size.width, 0)，导致右侧出现斜向线段，不符合目标形状的垂直侧边

如果你的目标形状是顶部中间向下凹（而非底部），只需调整贝塞尔曲线的位置：

int curveHeight = 20;

Path path = Path()
  ..lineTo(0, 0)
  ..quadraticBezierTo(
    size.width / 2, 0 + curveHeight,
    size.width, 0,
  )
  ..lineTo(size.width, size.height)
  ..lineTo(0, size.height)
  ..close();

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