Flutter技能进阶：如何解决复杂UI场景下的性能瓶颈

1次阅读

没有评论

共计 2485 个字符，预计需要花费 7 分钟才能阅读完成。

在 Flutter 开发中，我们常常遇到复杂 UI 场景下的性能问题。尤其是在以下三种情况下，性能问题尤为突出：

复杂列表滚动卡顿 ：当列表项包含大量子 Widget 或复杂布局时，快速滚动会出现明显掉帧
动画不流畅 ：多个动画同时运行时，特别是涉及到布局变化的动画，容易导致 UI 线程阻塞
自定义绘制性能低下 ：在 CustomPainter 中执行复杂绘制逻辑时，频繁触发重绘会影响整体性能

这些问题的根本原因大多与 Flutter 的渲染机制有关。Flutter 是单线程模型，UI 线程和 GPU 线程的协作方式决定了性能上限。当 UI 线程忙于计算时，GPU 线程就会等待，导致帧率下降。

针对上述问题，Flutter 提供了多种优化方案，每种方案都有其最佳适用场景：

RepaintBoundary：适用于局部重绘场景，可以将不需要整体重绘的 Widget 子树隔离出来
Isolate：适合处理 CPU 密集型任务，如图片解码、复杂计算等
CustomPainter 优化 ：通过优化绘制命令和减少不必要的绘制操作提升性能
ListView.builder 优化 ：对于长列表，使用 builder 构造函数和 const Widget 可以显著提升性能

class OptimizedListItem extends StatelessWidget {const OptimizedListItem({Key? key, required this.item}) : super(key: key);

  final Item item;

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: Container(padding: const EdgeInsets.all(8),
        child: Column(
          children: [
            // 使用 const 修饰不需要重建的子 Widget
            const ItemHeader(),
            ItemContent(content: item.content),
            const ItemFooter(),],
        ),
      ),
    );
  }
}

关键点说明：

使用 const 修饰不需要重建的子 Widget
合理使用 Key 帮助 Flutter 识别 Widget 身份
通过 RepaintBoundary 隔离重绘区域

// 在 isolate 中执行的计算函数
static Future<Result> computeInIsolate(Input input) async {final receivePort = ReceivePort();
  await Isolate.spawn(_isolateEntry, receivePort.sendPort);

  final sendPort = await receivePort.first as SendPort;
  final responsePort = ReceivePort();
  sendPort.send([input, responsePort.sendPort]);

  return await responsePort.first as Result;
}

static void _isolateEntry(SendPort mainSendPort) {final port = ReceivePort();
  mainSendPort.send(port.sendPort);

  port.listen((message) {final input = message[0] as Input;
    final replyTo = message[1] as SendPort;

    // 执行耗时计算
    final result = _heavyCalculation(input);
    replyTo.send(result);
  });
}

class OptimizedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 1. 批量绘制操作
    final paint = Paint()..color = Colors.blue;
    final rects = _generateRects(size);

    // 使用 drawVertices 替代多个 drawRect
    final vertices = Vertices(
      VertexMode.triangles,
      _generateVertices(rects),
    );
    canvas.drawVertices(vertices, BlendMode.srcOver, paint);

    // 2. 避免在 paint 方法中创建对象
    _drawPrecomputedPaths(canvas);
  }

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

使用 Flutter Performance 工具进行测试，得到如下数据：