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

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

接上篇:


二、 扩展能力

 

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

 

1. 自定义Node——主题能力

 

image.png

原文为gif

 

如上面视频演示的,当输入两个#中间包含字符,则变成一个主题的样式,点击可以跳转到对应的主题落地页;可以对主题进行编辑,如果删掉其中一个#,则变成普通的文本。

 

要实现这样一个自定义主题,我们需要实现以下几个步骤:自定义Element、自定义Normalizing

 

首先是定义Element:

 

image.png


接下来就轮到强大的自定义Normalizing出场了,通过自定义规则,处理主题Node节点校验:

 

image.png


只需要这样简单两步,就实现了主题能力的支持;业务还可以根据自己的需求定制更加复杂的场景,比如有序段落等等。

 

2. Plugin扩展——实现撤销功能

 

image.png

原文为gif

 

如上面图所示,我们实现了一个简单的Plugin层的扩展——撤销功能;在前面讲到协议层设计的时候,我们讨论过Slate的精简的Opeartion设计,每一次交互的Commond,最终都会拆解成一个或者多个Opeartion执行;我们可以通过以下三步实现plugin的扩展:

 

重写Operation的apply方法,通过过滤、合并等操作,记录Opeartion执行的历史

实现Opeartion的reverse方法

根据Opeartion执行历史,调用Opeartion的reverse方法,执行reverse操作

 

三、 总结

 

通过两篇文章,我们介绍了富文本编辑器协议层、渲染层设计和实现,完成了一个功能完善的Flutter富文本编辑器;接下来我们会介绍Flutter富文本编辑器体验优化方面闲鱼的一些实践和挑战。

相关文章
|
3月前
|
JSON Dart Android开发
Flutter 2024: Impeller引擎引领渲染新纪元
Flutter 2024以Impeller引擎引领渲染新时代,全面提升性能与流畅度。Impeller已在iOS及Android(支持Vulkan/OpenGL)全面部署,Material 3集成深化视觉体验,多视图支持增强复杂UI管理。Dart 3.2与3.4版本迭代优化语言特性与性能,引入宏编程简化JSON处理。桌面与Web端持续优化,深化平台适配。
179 14
|
15天前
|
Dart Android开发 开发者
Flutter跨平台开发实战:构建高性能移动应用
【10月更文挑战第25天】随着移动设备种类的增加,开发者面临跨平台应用开发的挑战。Flutter作为Google推出的开源UI工具包,凭借其强大的跨平台能力和高效的开发效率,成为解决这一问题的新方案。本文将介绍Flutter的核心优势、实战技巧及性能优化方法,通过一个简单的待办事项列表应用示例,帮助读者快速上手Flutter,构建高性能的移动应用。
31 0
|
3月前
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
30 10
|
3月前
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
32 2
|
3月前
|
Web App开发 新零售 前端开发
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
38 1
|
3月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
112 1
|
3月前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
1月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
28天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
69 3
|
13天前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
114 0