Flutter绘图项目：调整最后路径大小Listener失效及状态重置求助

我正在开发一个Flutter绘图项目，需要实现调整最后一条绘制路径大小的功能。但修改列表中的元素时，Listener出现了异常：当注释掉//currentSketch.value = sketch;时，点击缩放按钮并移动指针，activeFunction能保持scale状态；但取消注释该行后，点击按钮时activeFunction会被设为DrawingFunction.scale，触发onPointerMove时状态却变回draw。

问题代码如下：

[...]
  Widget buildCurrentPath(BuildContext context) {
    ValueNotifier<DrawingFunction> activeFunction =
        ValueNotifier(DrawingFunction.draw);

    return Listener(
      onPointerDown: (details) {
        final box = context.findRenderObject() as RenderBox;
        final offset = box.globalToLocal(details.position);

        if (allSketches.value.isNotEmpty) {
          Rect scaleButtonPosition =
              allSketches.value.last.getScaleButtonPosition();

          if (scaleButtonPosition.contains(offset)) {
            print("Scale button pressed");
            activeFunction.value = DrawingFunction.scale;
          }
        }
        if (activeFunction.value == DrawingFunction.draw) {
          currentSketch.value = Sketch.fromDrawingMode(
            Sketch(
              points: [offset],
              color: selectedColor.value,
              size: strokeSize.value,
            ),
            drawingMode.value,
            filled.value,
          );
        }
      },
      onPointerMove: (details) {
        final box = context.findRenderObject() as RenderBox;
        final offset = box.globalToLocal(details.position);

        print(activeFunction);

        if (activeFunction.value == DrawingFunction.draw) {
          final points = List<Offset>.from(currentSketch.value?.points ?? [])
            ..add(offset);

          currentSketch.value = Sketch.fromDrawingMode(
            Sketch(
                points: points,
                color: selectedColor.value,
                size: strokeSize.value),
            drawingMode.value,
            filled.value,
          );
        } else if (activeFunction.value == DrawingFunction.scale) {
          double scale = 0.9;

          Sketch sketch = allSketches.value.last;
          Path transformedPath = sketch.path
              .transform(Matrix4.diagonal3Values(scale, scale, 1).storage);

          sketch.path = transformedPath;
          //currentSketch.value = sketch;
        }
      },
      onPointerUp: (details) {
        if (activeFunction.value == DrawingFunction.draw) {
          allSketches.value = List<Sketch>.from(allSketches.value)
            ..add(currentSketch.value!);

          currentSketch.value = null;
        }
      },
      child: RepaintBoundary(
[...]

核心原因 #

activeFunction是buildCurrentPath方法内的局部变量，每次currentSketch.value更新都会触发Widget重建，buildCurrentPath重新执行，导致activeFunction被重新初始化为DrawingFunction.draw，这就是状态丢失的根本原因。

解决步骤 #

1. 将activeFunction提升为组件成员变量
   把它从build方法内移到State类的成员位置，这样生命周期和组件绑定，不会随build重建而重置：

class YourDrawingWidget extends StatefulWidget {
  @override
  State<YourDrawingWidget> createState() => _YourDrawingWidgetState();
}

class _YourDrawingWidgetState extends State<YourDrawingWidget> {
  // 提升为State成员变量
  final ValueNotifier<DrawingFunction> activeFunction = ValueNotifier(DrawingFunction.draw);

  Widget buildCurrentPath(BuildContext context) {
    // 移除原局部声明
    return Listener(
      // 后续逻辑保持不变
      ...
    );
  }

  @override
  Widget build(BuildContext context) {
    return ...;
  }
}

2. 修正缩放逻辑的不可变问题
   allSketches.value应作为不可变列表处理，直接修改元素无法触发UI更新，需创建新的列表和Sketch对象：

else if (activeFunction.value == DrawingFunction.scale) {
  double scale = 0.9;

  // 复制原列表，避免直接修改源数据
  List<Sketch> updatedSketches = List.from(allSketches.value);
  // 创建新的Sketch对象修改路径，保持不可变性
  Sketch updatedSketch = Sketch(
    points: updatedSketches.last.points,
    color: updatedSketches.last.color,
    size: updatedSketches.last.size,
    path: updatedSketches.last.path.transform(Matrix4.diagonal3Values(scale, scale, 1).storage),
  );
  updatedSketches[updatedSketches.length - 1] = updatedSketch;
  allSketches.value = updatedSketches;
  
  // 赋值新对象同步currentSketch
  currentSketch.value = updatedSketch;
}

• 用RepaintBoundary隔离重绘区域：将频繁重绘的元素单独包裹，避免整个页面重绘，提升性能。
• 坚持不可变数据管理状态：用ValueNotifier<List<Sketch>>管理路径，每次修改都创建新列表和对象，确保状态变化正确触发UI更新。
• 缓存复杂计算结果：提前计算并缓存重复使用的路径、变换矩阵，避免在paint方法中做大量计算（paint会被频繁调用）。
• 优化CustomPainter的shouldRepaint：重写该方法，仅当绘制数据真的变化时返回true，减少不必要的重绘。
• 避免在手势回调中阻塞UI：如果回调涉及大量计算，放到异步任务或compute中执行，防止卡顿。
• 用Matrix4处理变换：缩放、平移、旋转优先用矩阵变换，比手动计算路径点更高效且不易出错。

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