Question

我使用CustomPaint创建了一个自定义绘制的小部件，该小部件具有路径作为轮廓。但是，将小部件包装在GestureDetector中会使单击区域变成整个画布上的矩形，是否可以裁剪GestureDetector，使单击仅在路径内起作用？

Answer 1

您可以从hitTest实现CustomPainter方法，在其中添加Path并使用条件path.contains(position)以确保触摸仅覆盖路径部分。

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return null;
  }

  @override
  bool hitTest(Offset position) {
    Path path = Path();
    //add your lines/curves here
    path.close();
    return path.contains(position);
  }
}

有关bool hitTest(Offset position)的更多信息：

每当对以下对象执行命中测试时调用   使用此自定义绘画委托。

给定点相对于与最后一个点相同的坐标空间   [绘画]通话。

默认行为是考虑要命中的所有点   背景画家，前景画家也无济于事。

如果给定位置对应于绘制点，则返回true   应视为“匹配”的图片，如果对应于   应该在绘制的图像之外考虑的点，并且为null   使用默认行为。

我在这里回答了类似的问题：Flutter: What is the correct way to detect touch enter, move and exit on CustomPainter objects

如何用路径剪切GestureDetector（或InkWell）输入区域？

1 个答案: