如何从自定义绘画小部件更改为剪辑路径小部件？

Question

class CoverPainter extends CustomPainter {
  final Size sSize;
  const CoverPainter({this.sSize});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    final double r = (sSize.width).toDouble()/6.8;

    paint.color = Color(0xffE6E6E5);
    canvas.drawPath(
      Path.combine(
        PathOperation.difference,
        Path()..addRect(Rect.fromLTRB(sSize.width/2-r, 0.6*sSize.height-90-r, sSize.width/2+r, 0.6*sSize.height-90+r)),
        Path()
          ..addOval(Rect.fromCircle(
              center: Offset(sSize.width / 2, 1.2/2*sSize.height-90 ),
              radius: sSize.width/6.8))
          ..close(),
      ),
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

这是我的原始代码，出于某些原因，我需要将其更改为剪辑路径小部件。 作为初学者，这真的很难......（顺便说一句，sSize 是 screenSize，而不是 canvas 尺寸）

class CoverClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    //final path = Path();
    final double r = (size.width).toDouble()/6.8;

    Path.combine(
        PathOperation.difference,
        Path()..addRect(Rect.fromLTRB(size.width/2-r, 0.6*size.height-90-r, size.width/2+r, 0.6*size.height-90+r)),
        Path()
          ..addOval(Rect.fromCircle(
              center: Offset(size.width / 2, 1.2/2*size.height-90 ),
              radius: size.width/6.8))
          ..close()
    );
    return Path();
  }

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

我像这样尝试过，但什么也没发生。 没有错误，但没有显示。

class _Layer2State extends State<Layer2> {
  @override
  Widget build(BuildContext context) {
    final Size size = widget.size;

    // return CustomPaint(painter: CoverPainter(sSize: size));

    return ClipPath(
      clipper: CoverClipper(),
      child: Container(
        color: Colors.white,
        height: size.height,
        width: size.width,
      ),
    );
  }
}

实际上，我对剪辑路径一无所知。 我需要帮助......

Answer 1

您需要返回要修改的实际路径，它将起作用。 当前返回的路径是空的：

class CoverClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final double r = (size.width).toDouble()/6.8;

    return Path.combine(
        PathOperation.difference,
        Path()..addRect(Rect.fromLTRB(size.width/2-r, 0.6*size.height-90-r, size.width/2+r, 0.6*size.height-90+r)),
        Path()
          ..addOval(Rect.fromCircle(
              center: Offset(size.width / 2, 1.2/2*size.height-90 ),
              radius: size.width/6.8))
          ..close()
    );
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true; // you can also change this to true to repaint.
  }
}