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

  1. 云栖社区>
  2. 闲鱼技术>
  3. 博客>
  4. 正文

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

闲鱼技术 2019-07-31 13:59:39 浏览4441
展开阅读全文

作者:闲鱼技术-玄川

背景

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

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

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

富文本的原理

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

  • 创建过程
    RichText 创建

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

    1. 先创建LeafRenderObject

网友评论

登录后评论
0/500
评论
闲鱼技术
+ 关注
所属云栖号: 闲鱼技术