打造Flutter高性能富文本编辑器——渲染篇

本系列文章主要介绍Flutter富文本编辑的设计和实现，从协议层、渲染层、自定义扩展以及体验优化等方面，详细介绍如何实现一个功能完善、可扩展、高性能的Flutter富文本编辑器，以及闲鱼在实践过程中遇到的问题和我们的一些解法。

开篇

协议篇文章，我们介绍了Flutter富文本编辑器协议层的设计。以Slate为例，介绍了协议层设计的几个重要的概念：嵌套Model、Opeartion、Normalizing；站在Slate的肩膀上，让我们有了一个强壮、设计完善的富文本协议层，接下来就让我们看看渲染层是如何实现的；

让我们回顾一下Mural整体的架构设计分层：

渲染层主要工作是将协议Model转换成Widget渲染到屏幕上，以及处理选区、光标的计算和绘制，处理用户的手势交互、键盘交互等一系列工作；

Textfield的渲染实现

首先让我们来看下Flutter的TextField是如何渲染的：

如上图所示，Textfield继承自StatefulWidget，会build嵌套的Widget tree，其中有几个比较关键的Widget：

TextSelectionGestureDetector处理手势交互相关的逻辑，比如单击移动光标、长按选择文字展示Toolbar等等；

另一个比较重要的Widget——EditableText；EditableText在build的时候，通过buildTextSpan方法，根据TextEditingValue的普通文本以及composing部分，创建一个Textspan对象给_Editable；最终RenderEditable通过TextPainter将文本绘制到canvas上；

Mural的渲染实现

如上图所示，Mural在渲染层的设计上，与原生TextField前面一部分基本是一致的，不同之处从MuralEditable开始，对应到TextField的EditableText；

上面在协议层我们说了，Slate在协议在设计上是与Dom一致的，到Flutter渲染层，就会将Dom树转换成Widget tree，最终渲染到屏幕上；

MuralEditable不再是简单的创建一个TextSpan，而是按照Dom树结构，每一个Element映射成一个Widget；每个Element对应的Widget，创建的RenderO