CustomPaint 在其下方的小部件上绘制。如何避免？

Question

我有一个大小为 300、300 的 CustomPaoint。在这个下面我还有其他小部件。我还有一个侦听器，用于跟踪向下和移动位置并将偏移量添加到列表中。此列表用于状态更改并发送到 CustomPainter 进行绘制。

一切正常。如果我在 CustomPaint 小部件的边界外点击，则它不会绘制。但是，如果我点击 CustomPaint 内部并移出它，那么偏移量将被记录并用于绘画，这会导致在 CustomPaint 下面的其他小部件中进行绘画。

如何避免？下面是我的代码。

class DrawingCanvas extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new DrawingCanvasState();

}

class DrawingCanvasState extends State<DrawingCanvas> {

  GlobalKey _paintKey = new GlobalKey();
  List<Offset> _finalOffsets = <Offset>[];

  DrawingCanvasState() {
  }

  @override
  Widget build(BuildContext context) {
    return new Listener(
      onPointerDown: (PointerDownEvent pdEvent) {
        RenderBox referenceBox = _paintKey.currentContext.findRenderObject();
        Offset localOffset = referenceBox.globalToLocal(pdEvent.position);
        setState((){
          this._finalOffsets.clear();
          this._finalOffsets.add(localOffset);
        });
      },
      onPointerMove: (PointerMoveEvent pmEvent) {
        RenderBox referenceBox = _paintKey.currentContext.findRenderObject();
        Offset localOffset = referenceBox.globalToLocal(pmEvent.position);
        setState((){
          this._finalOffsets.add(localOffset);
        });
      },
      onPointerUp: (PointerUpEvent puEvent){
      },
      onPointerCancel: (PointerCancelEvent pcEvent){
      },
      child: new CustomPaint(
        key: _paintKey,
        size: new Size(300.0, 300.0),
        isComplex: true,
        willChange: true,
        painter: new CanvasPainter(this._finalOffsets),
        child: new ConstrainedBox(
          constraints: new BoxConstraints.tightForFinite(width: 300.00, height: 300.00),
        ),
      ),
      behavior: HitTestBehavior.deferToChild,
    );
  }
}

class CanvasPainter extends CustomPainter {
  List<Offset> _offsets;

  CanvasPainter(List<Offset> pOffsets){
    this._offsets = pOffsets;
  }

  @override
  void paint(Canvas canvas, Size size) {

    Paint p = new Paint();
    p.color = Colors.black;
    p.strokeWidth = 5.0;
    p.isAntiAlias = true;
    p.style = PaintingStyle.stroke;
    p.strokeJoin = StrokeJoin.round;
    p.strokeCap = StrokeCap.round;
    canvas.drawPoints(PointMode.polygon, this._offsets, p);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint 
    //print("should repaint check called");
    return true;
  }
}

注意 - DrawingCanvas 在另一个 Column Widget 中使用。下面还有两个Widget。

请帮忙。

Answer 1

经过一些研究，我只是更改了我的代码以按照以下问题中的答案遵循代码。

CustomPaint 在其下方的小部件上绘制。如何避免？

CustomPaint paints on widgets below it. How to avoid it?

flutter