在Flutter 中创建自定义形状

发布于11月01日

I'm working on a Flutter project and I need to create a custom shape that looks like the one shown below:

我试着用fluttershapemaker，但我不能完全达到我需要的形状.

我听说过Flutter中的CustomPainter小部件，但我不熟悉它.有人能提供如何使用CustomPainter创建此特定形状的指导或建议其他方法来实现它吗？

任何帮助或建议将不胜感激.感谢您发送编修.

推荐答案

你可以用CustomPainter画出来:

class CustomShapePainter extends CustomPainter {
  const CustomShapePainter({
    required this.topRadius,
    required this.bottomRadius,
    required this.color,
  });

  final double topRadius;
  final double bottomRadius;
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    final path = Path()
      // Top side
      ..lineTo(size.width - topRadius, 0)
      // Top-right corner
      ..arcToPoint(
        Offset(size.width, topRadius),
        radius: Radius.circular(topRadius),
      )
      // Right side
      ..lineTo(size.width, size.height - bottomRadius)
      // Bottom-right corner
      ..arcToPoint(
        Offset(size.width - bottomRadius, size.height),
        radius: Radius.circular(bottomRadius),
      )
      // Bottom side
      ..lineTo(bottomRadius + topRadius, size.height)
      // Bottom-left corner
      ..arcToPoint(
        Offset(topRadius, size.height - bottomRadius),
        radius: Radius.circular(bottomRadius),
      )
      // Left side
      ..lineTo(topRadius, topRadius)
      // Top-right inverted corner
      ..arcToPoint(
        Offset.zero,
        radius: Radius.circular(topRadius),
        clockwise: false,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomShapePainter oldDelegate) {
    return oldDelegate.topRadius != topRadius ||
        oldDelegate.bottomRadius != bottomRadius ||
        oldDelegate.color != color;
  }
}

Working example on DartPad.