闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(上)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(上)

 作者:光酒 闲鱼作为一个二手闲置交易平台,卖家发布商品产出优质的供给尤为重要。商品发布器希望拥有富文本编辑能力,让用户简单便捷的方式产出更加优质的内容;Flutter本身没有富文本编辑器的能力的,只有最基础的文本编辑器TextField。 对于更加复杂的场景,比如支持...

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(中)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(中)

接上篇:2. Slate协议层设计 协议层的整体架构设计如下图: 下面我们就以Slate为例,来看一看富文本编辑器的协议层设计,需要定义的核心概念和模块: • 嵌套Model定义。• 原子能力Operation设计。• 秩序维护者...

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(下)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(下)

接上篇:2) 协议层设计——原子能力Operation 接下来需要富文本Commond协议的设计,用户的每一次的文字输入、删除、文字加粗、换行等操作都是一次Command指令;Slate抽象定义了九个最基本的Operations,协议层所有的Commond指令,最终在协议层,都会...

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器—渲染篇(上)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器—渲染篇(上)

 作者:光酒 一、 开篇 协议篇文章,我们介绍了Flutter富文本编辑器协议层的设计。以Slate为例,介绍了协议层设计的几个重要的概念:嵌套Model、Opeartion、Normalizing;站在Slate的肩膀上,让我们有了一个强壮、设计完善的富文本...

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇(中)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇(中)

接上篇:4. 支持WidgetSpan 在实现自定义表情的过程中,我们发现在展示状态,复杂的WidgetSpan渲染是不存在问题的,但是在编辑状态支持WidgetSpan遇到了一系列问题。 简单一点的做法就是,在编辑状态将表情变成中括号包裹的文字,变成一个不可编辑的in...

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇(下)

闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——渲染篇(下)

接上篇:二、 扩展能力 扩展能力是我们设计之初就非常重视的能力,为接入方提供简单、强大的自定义扩展能力,支持复杂、不断变化的业务诉求;接下来我们就以自定义主题和撤销功能的实现,来看一看Mural在扩展能力方面的设计。 1. 自定义Node——主题能力 ...

闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(上)

闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(上)

 作者:岑彧 之前的系列文章介绍了协议层和渲染层的实现,大家可以知道Mural是基于Flutter TextField进行渲染层的设计与实现,然后对其底层的渲染逻辑进行改造,从而对富文本编辑能力进行支持。但是我们在改造过程中发现,其实在交互方面,Flutter有很多相比起Nati...

闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(中)

闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(中)

接上篇:https://developer.aliyun.com/article/1225954?spm=a2c6h.13148508.setting.24.595d4f0eudDbz0二、 选区支持反向选择 1. 背景与现状 在平时的使用中我们注意到,iOS...

闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(下)

接上篇:https://developer.aliyun.com/article/1225952?spm=a2c6h.13148508.setting.25.595d4f0eudDbz0三、 总结与展望 纵观整个系列文章,我们从协议层、渲染层、自定义扩展以及交互体验优化等方面,详...

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

社区圈子

阿里巴巴终端技术
阿里巴巴终端技术
阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。
1496+人已加入
加入
相关电子书
更多
Flutter企业级应用开发实战手册
Flutter技术解析与实战
Flutter in action
立即下载 立即下载 立即下载