如何低成本實(shí)現(xiàn)Flutter富文本，看這一篇就夠了！

作者：閑魚(yú)技術(shù)-玄川

背景

閑魚(yú)是國(guó)內(nèi)最早使用Flutter 的團(tuán)隊(duì)，作為一個(gè)電商App商品詳情頁(yè)是非常重要場(chǎng)景，其中最主要的技術(shù)能力是文字混排。



我們面對(duì)文本類(lèi)的需求是復(fù)雜而且多變，然而Flutter歷史的幾個(gè)版本，Text只能顯示簡(jiǎn)單樣式文本，它只有包含一些控制文本樣式顯示的屬性，而通過(guò)TextSpan連接實(shí)現(xiàn)的RichText也只能顯示多種文本樣式（例如：一個(gè)基礎(chǔ)文本片段和一個(gè)鏈接片段），這些遠(yuǎn)遠(yuǎn)達(dá)不到設(shè)計(jì)需要的能力。被產(chǎn)品和設(shè)計(jì)慫為啥別人別的平臺(tái)能做，F(xiàn)lutter為何做不了，不管，必須支持。


因此，需要開(kāi)發(fā)一個(gè)能力更強(qiáng)的文字混排組件就變得迫在眉睫。

富文本的原理

再講文字混批組件設(shè)計(jì)實(shí)現(xiàn)前，先來(lái)講講系統(tǒng)RichText的富文本的原理。

*
創(chuàng)建過(guò)程


創(chuàng)建RichText節(jié)點(diǎn)的時(shí)候其實(shí)會(huì)創(chuàng)建以下幾個(gè)對(duì)象:

* 先創(chuàng)建LeafRenderObject

• ? 上一篇：我用數(shù)據(jù)結(jié)構(gòu)花了一夜給女朋友寫(xiě)了個(gè)h5走迷宮小游戲
• ? 下一篇： 源碼分析Mybatis MappedStatement的創(chuàng)建流程