Flutter中CustomPaint图形隐藏重显出现左上角连线问题求助

你遇到的问题根源在于：隐藏图形时只是把对应坐标列表的元素替换成了Offset.zero，但没有清空列表；再次显示时又往同个列表里追加新坐标，导致子列表中同时存在Offset.zero（对应屏幕左上角）和正确的图形坐标，绘制时addPolygon会把所有点连起来，就出现了那条多余的连线。

以下是具体修复方案：

1. 修正隐藏操作的逻辑 #

把眼睛按钮里循环赋值Offset.zero的代码，改成直接清空对应索引的子列表：

InkWell(onTap: () {
  setState(() {
    if (isEyeSelected) {
      selectedEyeIndexes.remove(index);
      showHiddenItems(index);
    } else {
      selectedEyeIndexes.add(index);
      // 替换原来的循环赋值，直接清空坐标列表
      studentLabelCoordinate[index].clear();
    }
  });
},

2. 优化Painter的绘制逻辑（可选但推荐） #

在绘制前检查子列表是否为空，为空则跳过该路径的绘制，避免不必要的空路径操作：

class PathPainterStudent extends CustomPainter {
  PathPainterStudent({
    required this.coordinats,
    required this.labelColor,
  });

  List<List<Offset>> coordinats;
  List<String> labelColor;

  @override
  void paint(Canvas canvas, Size size) {
    for (var i = 0; i < coordinats.length; i++) {
      // 新增：坐标列表为空时跳过绘制
      if (coordinats[i].isEmpty) continue;

      Paint paintq = Paint()
        ..color = Color(int.parse(labelColor[i].replaceAll('#', '0xFF')))
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2.0;

      Paint paintq2 = Paint()
        ..color = Color(int.parse(labelColor[i].replaceAll('#', '0xFF')))
            .withOpacity(0.2)
        ..style = PaintingStyle.fill
        ..strokeWidth = 2.0;

      Path path = Path();
      path.addPolygon(coordinats[i], true);
      path.close();
      canvas.drawPath(path, paintq);
      canvas.drawPath(path, paintq2);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

原方案失效的原因 #

之前你将元素设为Offset.zero时，列表长度并未改变；再次显示时showHiddenItems调用add会在原有元素（包括zero点）后追加新坐标，导致子列表同时包含(0,0)和正确图形点，绘制时自然会连到左上角。清空列表后再添加新坐标，子列表就只有正确的图形点，不会出现多余连线。

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