Flutter如何将文本与图片混合编辑?(功能扩展篇)

前言

一个优秀的富文本,应该包含优秀的排版算法、丰富的功能和渲染的高性能。在上一篇中,我们实现了可扩展的、基础的富文本编辑器。那么在本文中,让我们对富文本进行更多功能的扩展。

注:

— 为了在阅读本文时有更好的体验,请先阅读本专栏第一篇,前文涉及到的知识点,本文不再赘述。(摸鱼的朋友请忽略)

— 完整代码太多, 文章只分析核心代码,需要源码请到 代码仓库

文本与图片混排

在有关富文本的业务需求中,或其他文章渲染中,图文混排的功能是十分重要的。在Flutter中,为了解决这个图文混排的问题,有一个很方便的组件:WidgetSpan。而在本专栏的第一篇的文本基础知识中,已经分析了TextSpan在文本渲染过程中的作用。那么WidgetSpan是如何被渲染的呢,Flutter又是如何将TextSpanWidgetSpan混合渲染在一起的呢?

—— 效果图完整代码在仓库demo/image_text

继续阅读Flutter如何将文本与图片混合编辑?(功能扩展篇)

Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)

前言

上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。

注:本文篇幅较长,从失败的方案开始分析再到成功实现自定义富文本编辑器,真正的从0到1。建议收藏!

— 完整代码太多, 文章只分析核心代码,需要源码请到 代码仓库

错误示范

遭一蹶者得一便,经一事者长一智。——宋·无名氏《五代汉史平话·汉史》

在刚开始实现富文本时,为了更快速的实现富文本的功能,我利用了TextField这个组件,但写着写着发现TextField有着很大的局限性。不过错误示范也给我带来了一些启发,那么现在就让我和大家一起去探索富文本编辑器的世界吧。

继续阅读Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)