如何阻止CustomPaint绘制到自身边界外的下方Widget上？

这个问题我之前也碰到过，核心就是当触摸从CustomPaint内部移到外部时，我们仍然在记录那些超出边界的坐标，导致绘制内容“跑”到其他Widget上面。这里有几个实用的解决办法，你可以根据需求选：

方法一：触摸事件阶段就过滤掉超出边界的点 #

这个方法从源头解决问题——只记录CustomPaint范围内的触摸点，根本不给超出的点进入绘制列表的机会。

步骤很简单：

1. 给你的CustomPaint绑定一个GlobalKey，用来获取它的布局边界：

final GlobalKey _customPaintKey = GlobalKey();

2. 在Listener的触摸回调里，先判断当前触摸位置是否在CustomPaint的范围内：

Listener(
  onPointerDown: (PointerDownEvent event) {
    final renderBox = _customPaintKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    // 将全局触摸坐标转换为CustomPaint的本地坐标，再判断是否在边界内
    final localPos = renderBox.globalToLocal(event.position);
    final isInside = renderBox.paintBounds.contains(localPos);
    if (isInside) {
      // 只有在内部才添加点到绘制列表
      setState(() {
        _points.add(localPos);
      });
    }
  },
  onPointerMove: (PointerMoveEvent event) {
    final renderBox = _customPaintKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return;
    final localPos = renderBox.globalToLocal(event.position);
    final isInside = renderBox.paintBounds.contains(localPos);
    if (isInside) {
      setState(() {
        _points.add(localPos);
      });
    }
    // 如果你希望移出边界时停止绘制，这里也可以加else逻辑，比如停止添加点
  },
  child: CustomPaint(
    key: _customPaintKey,
    size: const Size(300, 300),
    painter: MyPainter(points: _points),
  ),
)

这样一来，所有超出CustomPaint范围的触摸点都不会被记录，自然不会出现绘制溢出的问题。

方法二：在绘制阶段裁剪超出区域 #

如果不想在触摸事件里做判断，也可以在CustomPainter的paint方法里，用Canvas的裁剪功能把绘制范围限制在CustomPaint的尺寸内，就算有超出的点，也会被裁掉，不会显示到外面。

修改你的CustomPainter：

class MyPainter extends CustomPainter {
  final List<Offset> points;

  MyPainter({required this.points});

  @override
  void paint(Canvas canvas, Size size) {
    // 先裁剪出CustomPaint的边界范围，超出部分会被隐藏
    canvas.clipRect(Rect.fromLTWH(0, 0, size.width, size.height));
    
    // 下面是你的原有绘制逻辑
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round;
    
    for (int i = 1; i < points.length; i++) {
      canvas.drawLine(points[i-1], points[i], paint);
    }
  }

  @override
  bool shouldRepaint(covariant MyPainter oldDelegate) {
    return oldDelegate.points != points;
  }
}

这个方法更简单，相当于给CustomPaint加了个“遮罩”，不管画什么，超出边界的部分都看不到。

方法三：双重保险（推荐） #

如果你担心某些极端情况（比如触摸事件判断有误差），可以同时用上上面两个方法：既在触摸时过滤点，又在绘制时裁剪。这样就能彻底避免绘制溢出的问题了。

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