自定义 TextPainter：绕过 Widget 层直接在 Canvas 上进行高性能文本绘制

自定义 TextPainter：绕过 Widget 层直接在 Canvas 上进行高性能文本绘制

大家好，今天我们来深入探讨一个在 Flutter 中进行高性能文本绘制的技巧：自定义 TextPainter，并绕过 Widget 层，直接在 Canvas 上进行绘制。

为什么需要绕过 Widget 层进行文本绘制？

Flutter 的 Widget 机制非常强大，但同时也存在一些性能瓶颈。对于大量文本的频繁更新，使用标准的 Widget 方式进行绘制可能会导致性能问题，例如：

• Widget 重建开销： 每次文本内容改变，都需要重建 Widget 树，即使只是很小的改动。
• 布局计算开销： Widget 系统会进行复杂的布局计算，这也会消耗大量的 CPU 资源。
• GPU 上传开销： 每次绘制都需要将文本数据上传到 GPU，频繁的上传操作会影响性能。

因此，对于需要高性能文本绘制的场景，例如：

• 实时数据展示
• 游戏中的文本渲染
• 复杂的文本编辑器

绕过 Widget 层，直接在 Canvas 上进行绘制，可以显著提高性能。

TextPainter 的作用

TextPainter 是 Flutter SDK 中提供的一个用于文本布局和绘制的类。它负责：

• 文本布局： 将文本内容按照指定的样式（TextStyle）进行布局，计算出每个字符的位置、大小等信息。
• 文本绘制： 将布局好的文本绘制到 Canvas 上。

通过自定义 TextPainter，我们可以更精细地控制文本的布局和绘制过程，从而优化性能。

如何绕过 Widget 层直接在 Canvas 上绘制文本？

核心思路是：

1. 创建自定义 CustomPainter。
2. 在 CustomPainter 的 paint 方法中使用 TextPainter 进行文本布局和绘制。
3. 避免在每次 paint 方法调用时都重新创建 TextPainter 和进行文本布局。

下面是一个简单的示例：

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class HighPerformanceText extends StatefulWidget {
  final String text;
  final TextStyle style;

  const HighPerformanceText({Key? key, required this.text, required this.style}) : super(key: key);

  @override
  State<HighPerformanceText> createState() => _HighPerformanceTextState();
}

class _HighPerformanceTextState extends State<HighPerformanceText> {
  late TextPainter _textPainter;

  @override
  void initState() {
    super.initState();
    _textPainter = TextPainter(
      text: TextSpan(text: widget.text, style: widget.style),
      textDirection: TextDirection.ltr,
    );
    _textPainter.layout(); // 预先进行布局
  }

  @override
  void didUpdateWidget(covariant HighPerformanceText oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.text != oldWidget.text || widget.style != oldWidget.style) {
      _textPainter = TextPainter(
        text: TextSpan(text: widget.text, style: widget.style),
        textDirection: TextDirection.ltr,
      );
      _textPainter.layout(); // 重新进行布局
    }
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _TextPainterPainter(_textPainter),
    );
  }
}

class _TextPainterPainter extends CustomPainter {
  final TextPainter textPainter;

  _TextPainterPainter(this.textPainter);

  @override
  void paint(Canvas canvas, Size size) {
    textPainter.paint(canvas, Offset.zero);
  }

  @override
  bool shouldRepaint(covariant _TextPainterPainter oldDelegate) {
    return textPainter != oldDelegate.textPainter;
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: HighPerformanceText(
            text: 'Hello, High Performance Text!',
            style: const TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    ),
  );
}

在这个示例中：

• HighPerformanceText 是一个 StatefulWidget，用于管理文本内容和样式。
• _TextPainterPainter 是一个 CustomPainter，负责在 Canvas 上绘制文本。
• _textPainter 在 initState 中创建，并预先进行布局。
• didUpdateWidget 方法用于检测文本内容或样式是否发生改变，如果发生改变，则重新创建 TextPainter 并进行布局。
• shouldRepaint 方法用于判断是否需要重新绘制。

关键点：

• 缓存 TextPainter： 在 initState 中创建 TextPainter，并将其缓存起来。避免在每次 paint 方法调用时都重新创建 TextPainter。
• 预先布局： 在 initState 中调用 _textPainter.layout() 方法，预先进行文本布局。避免在每次 paint 方法调用时都进行文本布局。
• didUpdateWidget 检测变化： 只在文本内容或样式发生改变时，才重新创建 TextPainter 并进行布局。
• shouldRepaint 优化： 只在 TextPainter 发生改变时，才进行重新绘制。

更进一步的优化

上面的示例已经比直接使用 Widget 方式绘制文本性能更高了，但仍然可以进行一些优化：

1. 使用 Picture 缓存绘制结果： 可以将 TextPainter 的绘制结果缓存到 Picture 中，然后在 paint 方法中直接绘制 Picture。这样可以避免每次绘制都重新进行文本布局和绘制。

   import 'package:flutter/material.dart';
   import 'dart:ui' as ui;
   
   class HighPerformanceText extends StatefulWidget {
     final String text;
     final TextStyle style;
   
     const HighPerformanceText({Key? key, required this.text, required this.style}) : super(key: key);
   
     @override
     State<HighPerformanceText> createState() => _HighPerformanceTextState();
   }
   
   class _HighPerformanceTextState extends State<HighPerformanceText> {
     late TextPainter _textPainter;
     ui.Picture? _textPicture; // 用于缓存绘制结果
   
     @override
     void initState() {
       super.initState();
       _textPainter = TextPainter(
         text: TextSpan(text: widget.text, style: widget.style),
         textDirection: TextDirection.ltr,
       );
       _buildTextPicture(); // 预先构建 Picture
     }
   
     @override
     void didUpdateWidget(covariant HighPerformanceText oldWidget) {
       super.didUpdateWidget(oldWidget);
       if (widget.text != oldWidget.text || widget.style != oldWidget.style) {
         _textPainter = TextPainter(
           text: TextSpan(text: widget.text, style: widget.style),
           textDirection: TextDirection.ltr,
         );
         _buildTextPicture(); // 重新构建 Picture
       }
     }
   
     void _buildTextPicture() {
       _textPainter.layout();
       final recorder = ui.PictureRecorder();
       final canvas = Canvas(recorder);
       _textPainter.paint(canvas, Offset.zero);
       _textPicture = recorder.endRecording();
     }
   
     @override
     Widget build(BuildContext context) {
       return CustomPaint(
         painter: _TextPainterPainter(_textPicture),
       );
     }
   }
   
   class _TextPainterPainter extends CustomPainter {
     final ui.Picture? textPicture;
   
     _TextPainterPainter(this.textPicture);
   
     @override
     void paint(Canvas canvas, Size size) {
       if (textPicture != null) {
         canvas.drawPicture(textPicture!);
       }
     }
   
     @override
     bool shouldRepaint(covariant _TextPainterPainter oldDelegate) {
       return textPicture != oldDelegate.textPicture;
     }
   }
   
   void main() {
     runApp(
       MaterialApp(
         home: Scaffold(
           body: Center(
             child: HighPerformanceText(
               text: 'Hello, High Performance Text!',
               style: const TextStyle(fontSize: 24, color: Colors.blue),
             ),
           ),
         ),
       ),
     );
   }

   在这个示例中，_buildTextPicture 方法用于构建 Picture，并将 TextPainter 的绘制结果缓存到 _textPicture 中。在 paint 方法中，直接使用 canvas.drawPicture 方法绘制 _textPicture。

2. 使用 Paragraph 进行更底层的文本布局： Paragraph 是 Flutter SDK 中更底层的文本布局类，它提供了更精细的控制。可以使用 ParagraphBuilder 构建 Paragraph 对象，然后使用 Paragraph.layout 方法进行布局，最后使用 Canvas.drawParagraph 方法进行绘制。

   import 'package:flutter/material.dart';
   import 'dart:ui' as ui;
   
   class HighPerformanceText extends StatefulWidget {
     final String text;
     final TextStyle style;
   
     const HighPerformanceText({Key? key, required this.text, required this.style}) : super(key: key);
   
     @override
     State<HighPerformanceText> createState() => _HighPerformanceTextState();
   }
   
   class _HighPerformanceTextState extends State<HighPerformanceText> {
     ui.Paragraph? _paragraph;
   
     @override
     void initState() {
       super.initState();
       _buildParagraph();
     }
   
     @override
     void didUpdateWidget(covariant HighPerformanceText oldWidget) {
       super.didUpdateWidget(oldWidget);
       if (widget.text != oldWidget.text || widget.style != oldWidget.style) {
         _buildParagraph();
       }
     }
   
     void _buildParagraph() {
       final builder = ui.ParagraphBuilder(
         ui.ParagraphStyle(
           textAlign: TextAlign.left,
           textDirection: TextDirection.ltr,
           maxLines: 1, // 可根据需要调整
         ),
       );
       builder.pushStyle(widget.style.getTextStyle());
       builder.addText(widget.text);
       final paragraph = builder.build();
       paragraph.layout(const ui.ParagraphConstraints(width: 200)); // 宽度需要约束，根据需求调整
       setState(() {
         _paragraph = paragraph;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return CustomPaint(
         painter: _TextPainterPainter(_paragraph),
       );
     }
   }
   
   class _TextPainterPainter extends CustomPainter {
     final ui.Paragraph? paragraph;
   
     _TextPainterPainter(this.paragraph);
   
     @override
     void paint(Canvas canvas, Size size) {
       if (paragraph != null) {
         canvas.drawParagraph(paragraph!, Offset.zero);
       }
     }
   
     @override
     bool shouldRepaint(covariant _TextPainterPainter oldDelegate) {
       return paragraph != oldDelegate.paragraph;
     }
   }
   
   void main() {
     runApp(
       MaterialApp(
         home: Scaffold(
           body: Center(
             child: HighPerformanceText(
               text: 'Hello, High Performance Text!',
               style: const TextStyle(fontSize: 24, color: Colors.blue),
             ),
           ),
         ),
       ),
     );
   }

   在这个示例中，_buildParagraph 方法用于构建 Paragraph 对象，并进行布局。在 paint 方法中，直接使用 canvas.drawParagraph 方法绘制 _paragraph。

3. 减少不必要的重绘： 仔细分析业务逻辑，尽量减少不必要的重绘。例如，可以使用 ValueListenableBuilder 只更新需要更新的部分。

4. Offscreen Canvas: 考虑使用 Offscreen Canvas（离屏画布）技术。将复杂的绘制操作在后台线程完成，然后将结果渲染到屏幕上。这可以避免在主线程上进行耗时的绘制操作，提高应用的响应速度。但需要注意的是，离屏画布会增加内存消耗，需要谨慎使用。

性能对比

为了更直观地了解性能提升效果，可以进行一些性能测试。例如，可以使用 Stopwatch 类来测量绘制时间。

方法	优点	缺点	适用场景
标准 Widget 方式	简单易用，代码可读性高	性能较差，Widget 重建和布局计算开销大	文本内容不经常改变，对性能要求不高的场景
自定义 TextPainter + CustomPainter	性能较高，可以避免 Widget 重建和布局计算开销	代码复杂度较高，需要手动管理 TextPainter 的生命周期	文本内容频繁改变，对性能有一定要求的场景
使用 Picture 缓存绘制结果	性能更高，可以避免每次绘制都重新进行文本布局和绘制	需要额外的内存来缓存 Picture，如果文本内容经常改变，则需要频繁地重新构建 Picture	文本内容改变不频繁，对性能要求高的场景
使用 Paragraph 进行底层布局	可以更精细地控制文本的布局和绘制过程，性能更高	代码复杂度最高，需要对 Paragraph 的 API 有深入的了解	对文本布局有特殊要求，对性能要求极高的场景
Offscreen Canvas	减少主线程绘制压力，避免卡顿	增加内存消耗，实现复杂	复杂绘制，保证UI流畅度

注意事项

• 内存管理： 在使用 Picture 缓存绘制结果时，需要注意内存管理。如果 Picture 占用过多的内存，可能会导致内存溢出。
• 文本样式： 文本样式（TextStyle）也会影响性能。尽量避免使用复杂的文本样式，例如：阴影、模糊等。
• 平台差异： 不同平台的文本渲染引擎可能存在差异，因此在进行性能优化时，需要考虑平台差异。

总结：更好的文本绘制体验

绕过 Widget 层，直接在 Canvas 上进行文本绘制，可以显著提高 Flutter 应用的性能。通过缓存 TextPainter、预先布局、使用 Picture 缓存绘制结果、使用 Paragraph 进行底层布局等技巧，可以进一步优化性能。需要根据实际场景选择合适的优化方案，并注意内存管理和平台差异。
优化手段各有千秋，根据场景选择最佳方案，同时注意内存的合理使用。
希望今天的分享对大家有所帮助。谢谢！