Stack中GestureDetector重叠导致单个手势失效的解决方案咨询

你的两个GestureDetector都绑定了占满整个画布的SizedBox，在Stack布局中蓝色的GestureDetector位于红色的上方，所有手势事件都会被上层的蓝色组件拦截，下层的红色组件根本无法接收到手势。同时当前逻辑不管点击的是不是圆圈本身，只要拖动就会触发位置更新，这也不符合只拖拽圆圈的预期。

将每个圆圈的GestureDetector和CustomPaint放在Positioned组件中，让GestureDetector只覆盖圆圈所在的区域，这样点击不同圆圈时对应的手势器就能接收到事件。同时调整坐标计算逻辑，适配Positioned的局部坐标。

修改后的核心代码片段 #

替换Stack中的两个圆圈组件： #

// for source point( Red circle)
Positioned(
  left: XSourceP - radiuspoint,
  top: YSourceP - radiuspoint,
  width: radiuspoint * 2,
  height: radiuspoint * 2,
  child: GestureDetector(
    onPanUpdate: (details) {
      // 计算画布上的绝对坐标
      final absoluteDx = XSourceP - radiuspoint + details.localPosition.dx;
      final absoluteDy = YSourceP - radiuspoint + details.localPosition.dy;

      if (absoluteDx > radiuspoint && absoluteDx < constraints.maxWidth - radiuspoint) {
        setState(() {
          XSourceP = absoluteDx;
        });
      }
      if (absoluteDy > radiuspoint && absoluteDy < constraints.maxHeight - radiuspoint) {
        setState(() {
          YSourceP = absoluteDy;
        });
      }
    },
    child: CustomPaint(
      painter: PointsPainter(XSourceP, YSourceP, radiuspoint),
    ),
  ),
),

//field point(BLUE circle)
Positioned(
  left: XFieldP - radiuspoint,
  top: YFieldP - radiuspoint,
  width: radiuspoint * 2,
  height: radiuspoint * 2,
  child: GestureDetector(
    onPanUpdate: (details) {
      final absoluteDx = XFieldP - radiuspoint + details.localPosition.dx;
      final absoluteDy = YFieldP - radiuspoint + details.localPosition.dy;

      if (absoluteDx > radiuspoint && absoluteDx < constraints.maxWidth - radiuspoint) {
        setState(() {
          XFieldP = absoluteDx;
        });
      }
      if (absoluteDy > radiuspoint && absoluteDy < constraints.maxHeight - radiuspoint) {
        setState(() {
          YFieldP = absoluteDy;
        });
      }
    },
    child: CustomPaint(
      painter: FieldPointsPainter(XFieldP , YFieldP, radiuspoint),
    ),
  ),
),

完整修改后的代码 #

import 'package:flutter/material.dart';
import'dart:math';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDown = false;
  var XSourceP = 20.0; // 初始值调整为在画布内，避免部分出界
  var YSourceP = 20.0;
  var XFieldP = 60.0;
  var YFieldP = 60.0;
  double radiuspoint =10.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Builder(
        builder: (BuildContext context) {
          return Scaffold(
            appBar: AppBar(title: const Text('Point Charge'),), 
            body: Column(
              children: [
                const Text('Hello'),
                Center(
                  child: Container(
                    alignment: Alignment.center,
                    height: MediaQuery.of(context).size.height*0.3,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.grey,
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                    child: LayoutBuilder(
                      builder: (_,constraints)=> Container(
                          width: constraints.maxWidth,
                          height: constraints.maxHeight,
                          color: Colors.white,
                          child: Stack(
                            children: [
                              // plotting X Y axis
                              Container(
                                width: constraints.maxWidth,
                                height:constraints.maxHeight, 
                                child:CustomPaint(painter: PlotPainter())
                              ),

                              // for source point( Red circle)
                              Positioned(
                                left: XSourceP - radiuspoint,
                                top: YSourceP - radiuspoint,
                                width: radiuspoint * 2,
                                height: radiuspoint * 2,
                                child: GestureDetector(
                                  onPanUpdate: (details) {
                                    final absoluteDx = XSourceP - radiuspoint + details.localPosition.dx;
                                    final absoluteDy = YSourceP - radiuspoint + details.localPosition.dy;

                                    if (absoluteDx > radiuspoint && absoluteDx < constraints.maxWidth - radiuspoint) {
                                      setState(() {
                                        XSourceP = absoluteDx;
                                      });
                                    }
                                    if (absoluteDy > radiuspoint && absoluteDy < constraints.maxHeight - radiuspoint) {
                                      setState(() {
                                        YSourceP = absoluteDy;
                                      });
                                    }
                                  },
                                  child: CustomPaint(
                                    painter: PointsPainter(XSourceP, YSourceP, radiuspoint),
                                  ),
                                ),
                              ),
                              
                              //field point(BLUE circle)
                              Positioned(
                                left: XFieldP - radiuspoint,
                                top: YFieldP - radiuspoint,
                                width: radiuspoint * 2,
                                height: radiuspoint * 2,
                                child: GestureDetector(
                                  onPanUpdate: (details) {
                                    final absoluteDx = XFieldP - radiuspoint + details.localPosition.dx;
                                    final absoluteDy = YFieldP - radiuspoint + details.localPosition.dy;

                                    if (absoluteDx > radiuspoint && absoluteDx < constraints.maxWidth - radiuspoint) {
                                      setState(() {
                                        XFieldP = absoluteDx;
                                      });
                                    }
                                    if (absoluteDy > radiuspoint && absoluteDy < constraints.maxHeight - radiuspoint) {
                                      setState(() {
                                        YFieldP = absoluteDy;
                                      });
                                    }
                                  },
                                  child: CustomPaint(
                                    painter: FieldPointsPainter(XFieldP , YFieldP, radiuspoint),
                                  ),
                                ),
                              ),
                            ]),
                        )
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      )
    );
  }
}

//drawing blue circle
class FieldPointsPainter extends CustomPainter {
  FieldPointsPainter(this.XFieldP , this.YFieldP, this.radiuspoint);
  double XFieldP,YFieldP, radiuspoint;
  
  @override
  void paint(Canvas canvas, Size size) {
    final CirclepaintF = Paint()..style = PaintingStyle.fill
    ..color = Colors.blue;
    canvas.drawCircle(Offset(radiuspoint, radiuspoint), radiuspoint, CirclepaintF);
  }

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

//drawing red circle
class PointsPainter extends CustomPainter {
  PointsPainter(this.XSourceP , this.YSourceP, this.radiuspoint);
  double XSourceP, YSourceP, radiuspoint;
  
  @override
  void paint(Canvas canvas, Size size) {
    final CirclepaintS = Paint()..style = PaintingStyle.fill
    ..color = Colors.red;
    canvas.drawCircle(Offset(radiuspoint, radiuspoint), radiuspoint, CirclepaintS);
  }

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

// drawing the x y axis
class PlotPainter extends CustomPainter {

  @override void paint(Canvas canvas, Size size){
    final midY = size.height/2;
    final midX = size.width/2;
    final paint = Paint()..style = PaintingStyle.fill
    ..color = Colors.black
    ..strokeWidth=1.0;
    final textPainterx = TextPainter(
      text: const TextSpan(
      text: 'x',
      style: TextStyle(
        color: Colors.black,
        fontSize: 15,
        ),
      ),
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center
      );
    final textPaintery = TextPainter(
      text: const TextSpan(
      text: 'y',
      style: TextStyle(
        color: Colors.black,
        fontSize: 13,
        ),
      ),
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.center
      );
    // X axis
    canvas.drawLine(Offset(0,midY), Offset(size.width,midY), paint);
    //y Axis
    canvas.drawLine(Offset(midX,0), Offset(midX,size.height), paint);
    //arrow head of the X-Y Axis
    canvas.drawLine(Offset(size.width,midY),Offset(size.width -5,midY -3) , paint);
    canvas.drawLine(Offset(size.width,midY),Offset(size.width -5,midY +3) , paint);
    canvas.drawLine(Offset(midX,0), Offset(midX-3,5), paint);
    canvas.drawLine(Offset(midX,0), Offset(midX+3,5), paint);
    
    textPainterx.layout();
    textPaintery.layout();
    // Draw the text  X at the X axis
    textPainterx.paint(canvas, Offset(size.width-7,midY +1));
    // Draw the text  y at the Y axis
    textPaintery.paint(canvas, Offset(midX+5,0));
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

关键改动说明 #

1. 用Positioned限定手势区域：每个圆圈的GestureDetector只覆盖圆圈大小的区域，避免上层组件拦截所有手势。
2. 调整坐标计算：将GestureDetector的局部坐标转换为画布的绝对坐标，确保拖拽位置正确。
3. 修改CustomPaint的绘制逻辑：因为现在CustomPaint的大小是圆圈的直径，所以绘制圆心时直接用Offset(radiuspoint, radiuspoint)即可，不用再依赖画布全局坐标。
4. 调整初始坐标：避免初始时圆圈部分出界，提升体验。

内容的提问来源于stack exchange，提问作者Tan K