如何低成本实现Flutter富文本，看这一篇就够了！

作者：闲鱼技术-玄川

背景

闲鱼是国内最早使用Flutter 的团队，作为一个电商App商品详情页是非常重要场景，其中最主要的技术能力是文字混排。

我们面对文本类的需求是复杂而且多变，然而Flutter历史的几个版本，Text只能显示简单样式文本，它只有包含一些控制文本样式显示的属性，而通过TextSpan连接实现的RichText也只能显示多种文本样式（例如：一个基础文本片段和一个链接片段），这些远远达不到设计需要的能力。被产品和设计怂为啥别人别的平台能做，Flutter为何做不了，不管，必须支持。

因此，需要开发一个能力更强的文字混排组件就变得迫在眉睫。

富文本的原理

再讲文字混批组件设计实现前，先来讲讲系统RichText的富文本的原理。

• 创建过程
  

  创建RichText节点的时候其实会创建以下几个对象:

  1. 先创建LeafRender