如何在Flutter中使用CustomClipper实现带圆角的尖顶容器？

你可以通过在路径中添加圆角过渡来实现需求，以下是修改后的代码：

class MyCustomClipper extends CustomClipper<Path> {
  // 自定义圆角半径，可根据需求调整
  final double radius;

  MyCustomClipper({this.radius = 16.0});

  @override
  Path getClip(Size size) {
    final path = Path();
    final quarterWidth = size.width * 0.25;
    final threeQuarterWidth = size.width * 0.75;

    // 从底部左下角开始绘制路径
    path.moveTo(0, size.height);
    // 画到底部右下角
    path.lineTo(size.width, size.height);
    // 从右下角绘制圆角过渡到右上角
    path.arcToPoint(
      Offset(size.width, radius),
      radius: Radius.circular(radius),
      clockwise: false,
    );
    // 从右上角过渡点画到顶部右侧尖点
    path.lineTo(threeQuarterWidth, 0);
    // 从顶部右侧尖点画到顶部左侧尖点
    path.lineTo(quarterWidth, 0);
    // 从顶部左侧尖点绘制圆角过渡到左上角
    path.arcToPoint(
      Offset(0, radius),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    // 闭合路径
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    if (oldClipper is MyCustomClipper) {
      return oldClipper.radius != radius;
    }
    return false;
  }
}

代码说明： #

• 新增radius参数，可灵活调整圆角大小
• 使用arcToPoint方法在左上角、右上角绘制平滑圆角
• 调整路径绘制顺序，确保圆角与斜向线条自然衔接
• 更新shouldReclip逻辑，当圆角半径变化时自动重新裁剪

如果需要让顶部尖点附近也带圆角，可以替换顶部的lineTo段为二次贝塞尔曲线：

// 替换原顶部lineTo相关代码
path.quadraticBezierTo(
  threeQuarterWidth + (size.width - threeQuarterWidth) / 2,
  radius / 2,
  threeQuarterWidth,
  0,
);
path.lineTo(quarterWidth, 0);
path.quadraticBezierTo(
  quarterWidth / 2,
  radius / 2,
  0,
  radius,
);

内容的提问来源于stack exchange，提问作者Wai Han Ko