Flutter Map折线绘制性能优化咨询：单组件多折线VS多组件单折线

我在Flutter应用中使用flutter_map展示地图，核心代码如下：

FlutterMap(
  mapController: widget.mapController,
  children: [
    SvgPolylineLayer(polylines: polylines),
  ],
)

SvgPolylineLayer是flutter_map原生PolylineLayer的克隆，因为原生组件无法满足自定义线条需求，我实现了带有自定义逻辑的该组件（自定义逻辑未在示例中展示）：

class SvgPolylineLayer extends StatelessWidget {
  final List<SvgPolyline> polylines;
  final bool polylineCulling;

  const SvgPolylineLayer({
    super.key,
    this.polylines = const [],
    this.pointerDistanceTolerance = 15,
  });

  @override
  Widget build(BuildContext context) {
    final map = MapCamera.of(context);

    return MobileLayerTransformer(
      child: CustomPaint(
        size: Size(
          map.size.x,
          map.size.y,
        ),
        isComplex: true,
        painter: SvgPolylinePainter(
          widget.polylineCulling
              ? allPolylines
                  .where(
                      (p) => p.boundingBox.isOverlapping(map.visibleBounds))
                  .toList()
              : allPolylines,
          map,
        ),
      ),
    );
  }
}

class SvgPolylinePainter extends CustomPainter {
  final List<SvgPolyline> polylines;

  final MapCamera map;
  final LatLngBounds bounds;

  SvgPolylinePainter(this.polylines, this.map) : bounds = map.visibleBounds;

  Offset getOffset(LatLng point) => map.getOffsetFromOrigin(point);

  @override
  void paint(Canvas canvas, Size size) {
    for (final polyline in polylines) {
      // This is just a method that calculates the points on the map
      final offsets = getOffsets(polyline.points);
      if (offsets.isEmpty) {
        continue;
      }

      for (int i = 0; i < offsets.length - 1; i++) {
        final p1 = offsets[i];
        final p2 = offsets[i + 1];

        // Draw path between the two points
        drawPath(p1, p2);
      }
    }
  }

  @override
  bool shouldRepaint(covariant SvgPolylinePainter oldDelegate) {
    return oldDelegate.bounds != bounds ||
        oldDelegate.polylines.length != polylines.length ||
        oldDelegate.hash != hash;
  }
}

当前Painter会遍历每条折线及其中的线段单独绘制（因每条线段样式不同）。但当地图上存在数百条折线，且需要对部分折线做动画时，每次修改一条折线的样式都需重绘整个组件。

我考虑另一种方案：创建仅绘制单条折线的Widget，将上百个该Widget传入FlutterMap的children列表，这样动画时仅需重绘目标折线，其他折线因shouldRepaint返回false无需重绘，但会产生上百个堆叠的Widget。想咨询哪种方案更优？

两种方案的优劣对比 #

• 方案一（单CustomPaint绘制所有折线）

  • 优点：Widget层级少，仅一个CustomPaint承载所有绘制逻辑，内存开销更低；地图平移/缩放时的整体重绘效率更高，因为只需一次Canvas操作。
  • 缺点：局部动画代价高，只要有一条折线样式变化，整个CustomPaint都会触发重绘，当折线数量达数百条时，单次重绘计算量过大，容易导致动画掉帧。

• 方案二（单折线Widget堆叠）

  • 优点：局部动画效率高，只有目标折线的Widget会触发重绘，其他折线不受影响，动画帧率有保障；每个折线的绘制逻辑独立，代码维护性更好，后续新增单折线交互（如点击、高亮）更方便。
  • 缺点：Widget数量随折线数线性增长，数百个Widget会增加Widget树复杂度；地图平移/缩放时，每个Widget都要执行坐标转换和绘制逻辑，整体重绘开销比方案一大。

最优选择建议 #

如果你的场景中局部动画（单折线样式变化）是高频操作，优先选方案二——Flutter的Widget本身轻量化，数百个Widget的性能开销远低于单次重绘数百条折线的计算量，动画流畅度是核心体验点。

如果动画操作极少，大部分场景是地图平移缩放，可以保留方案一，但需要优化shouldRepaint逻辑：

1. 不要仅通过长度和hash判断，要对比每条折线的状态（如样式、坐标）是否变化，只有当折线状态改变或地图bounds变化时才触发重绘。
2. 结合RepaintBoundary对折线进行分区域分隔，减少单次重绘的范围。

针对方案二还可以做两个优化：

1. 给每个单折线Widget添加RepaintBoundary，避免单个重绘影响其他折线。
2. 将所有单折线Widget放在同一个MobileLayerTransformer下，复用坐标转换逻辑，减少重复计算。

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