带有 CustomPaint 的 Flutter GestureDetector 不起作用 [英] Flutter GestureDetector with CustomPaint not working

问题描述

我正在尝试使用 CustomPaint 和 GestureDetector 创建一些自定义小部件.但是，我无法使用 GestureDetector 正确地与绘制的形状进行交互.如果容器是屏幕宽度和高度，或者根本没有，我只能检测一种形状的 onTap.

I am trying to create some custom widgets using CustomPaint and GestureDetector. However, I am unable to properly interact with the drawn shapes using the GestureDetector. I can detect onTap for only one shape if the container is screen width and height, or none at all.

请注意，我已经尝试了所有 HitTestBehavior 类型.

Please note that I have tried all HitTestBehavior types.

这是没有检测到任何东西的代码:

Here is the code whilst it's not detecting anything onTap:

class CanvasObject {
  Color color = Colors.green[800];
  double strokeWidth = 10.0;
  PaintingStyle style = PaintingStyle.stroke;
}

class CanvasNodeObject extends CanvasObject {
  double x;
  double y;
  double radius = 20;
  PaintingStyle style = PaintingStyle.fill;
  CanvasNodeObject({@required this.x, @required this.y});
}
class CanvasNodePainter extends CustomPainter {
  CanvasNodeObject node;
  CanvasNodePainter({this.node});

  @override
  void paint(Canvas canvas, Size size) {
    Path path;
    Paint nodePaint = Paint()
      ..color = node.color
      ..style = node.style;

    path = Path();
    path.moveTo(0, 0);
    path.addOval(
        Rect.fromCircle(center: Offset(0, 0), radius: node.radius));
    canvas.drawPath(path, nodePaint);
  }

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

class TestLineDrawing extends StatefulWidget {
  CanvasNodeObject startNode;
  CanvasNodeObject endNode;
  CanvasLineObject line;
  TestLineDrawing({List<double> x, List<double> y})
      : assert(x.length == 2),
        assert(y.length == 2) {
    startNode = CanvasNodeObject(x: x[0], y: y[0]);
    endNode = CanvasNodeObject(x: x[1], y: y[1]);
    line = CanvasLineObject(x: x, y: y);
  }

  @override
  _TestLineDrawingState createState() => _TestLineDrawingState();
}

class _TestLineDrawingState extends State<TestLineDrawing> {
  List<Widget> line() {
    return [
      Positioned(
        top: widget.endNode.x,
        left: widget.endNode.y,
        child:
      GestureDetector(
        behavior: HitTestBehavior.opaque,
        child:
        Container(
          height: widget.endNode.radius,
            width: widget.endNode.radius,
            child: CustomPaint(painter: CanvasNodePainter(node: widget.endNode))),
        onTap: () {
          setState(() {
            Random random = Random();
            widget.endNode.color = Color.fromARGB(255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
            debugPrint("EndNodeOnPress " + widget.endNode.color.toString());
          });
        },
      )),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: line(),
    ));
  }

在屏幕上是:

推荐答案

我通过以下操作解决了这个问题:

I resolved this issue by doing the following:

1. 使用 Path::addPath
将所有路径添加到名为 path 的顶级路径
2. 覆盖 hitTest 并使用 Path::contains

1. Adding all paths to a top level path called path using Path::addPath
2. Overriding hitTest and using Path::contains

  @override
  bool hitTest(Offset position) {
    bool hit = path.contains(position);
    return hit;
  }

这篇关于带有 CustomPaint 的 Flutter GestureDetector 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！