Flutter 圆圈中绘制三角形上的手势检测器

我正在尝试使用CustomPaint小部件处理三个绘制的“四分之一圈”的水龙头。我尝试在QuarterCirclePaint类中添加手势检测器。甚至尝试对TextSpan使用手势识别器也没有成功。试着把它包装在用手势检测器包装的容器里。查看了关于在CustomPaint周围添加手势检测器的类似帖子，但在这种情况下，它们似乎都不起作用。 如何做到这一点

class CategoryCircle extends StatelessWidget {
  final Color color;
  final double startAngle;
  final String category;
  final Offset textOffset;
  CategoryCircle({this.color, this.startAngle, this.category, this.textOffset});

  Widget build(BuildContext context) {
    FocusScope.of(context).nextFocus();
    return FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 1,
      child: Center(
        child: CustomPaint(
            painter: QuarterCirclePainter(
                context: context,
                color: color,
                startAngle: startAngle,
                sweepAngle: math.pi * 2 / 3,
                text: category,
                textOffset: textOffset)),
      ),
    );
  }
}

class QuarterCirclePainter extends CustomPainter {
  final BuildContext context;
  final Color color;
  final double startAngle;
  final double sweepAngle;
  final String text;
  final Offset textOffset;

  const QuarterCirclePainter(
      {this.context,
      this.color,
      this.startAngle,
      this.sweepAngle,
      this.text,
      this.textOffset});

  @override
  void paint(Canvas canvas, Size size) {
    Offset center = Offset(size.width / 2, size.height / 2);
    Rect rect = Rect.fromCircle(center: center, radius: 130);
    Path path = Path()
      // set the "current point"
      ..moveTo(center.dx, center.dy)
      ..arcTo(rect, startAngle, (math.pi * 2) / 3, false);
    canvas.drawPath(path, Paint()..color = color);
    TextSpan span = new TextSpan(
        style: GoogleFonts.overpass(
            textStyle: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
        text: text);
    TextPainter tp = new TextPainter(
        text: span,
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr);
    tp.layout();
    tp.paint(canvas, textOffset);
  }

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

---

我用您在

四分之一电路绘制程序中所做的操作制作了一个
自定义裁剪器
，它看起来像这样：

class QuaterCircleClipper extends CustomClipper<Path>{
  double startAngle, sweepAngle;

  QuaterCircleClipper({@required this.startAngle, @required this.sweepAngle});


  @override
  Path getClip(Size size){
    Offset center = Offset(size.width / 2, size.height / 2);
    Rect rect = Rect.fromCircle(center: center, radius: 130);
    Path path = Path()
      // set the "current point"
      ..moveTo(center.dx, center.dy)
      ..arcTo(rect, startAngle, (math.pi * 2) / 3, false);
      return path;
  }

  @override
  bool shouldReclip(oldCliper) => false;
}

你能试试
InkWell
而不是
GestureDetector
吗？似乎可以用了，谢谢！但是，你会如何添加文本，我有不同类别的四分之一的顶部@我认为这取决于布局是否随时间而改变。如果角度不变，那么我只需使用
堆栈
和
对齐
对文本位置进行硬编码，否则需要进行一些计算@莱奥布
Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: AspectRatio(
    aspectRatio: 1,
    child: ClipPath(
      clipper: QuaterCircleClipper(startAngle: 0, sweepAngle: 120),
      child: GestureDetector(
        onTap: (){showDialog(context: context, builder: (_) => AlertDialog(content: Text("Tap Detected"),));},
        child: Container(
          color: Colors.blueAccent,
        )
      ),
    ),
  )
),