Flutter富文本编辑器系列文章3——交互篇

之前的系列文章介绍了协议层和渲染层的实现，大家可以知道Mural是基于Flutter TextField进行渲染层的设计与实现，然后对其底层的渲染逻辑进行改造，从而对富文本编辑能力进行支持。但是我们在改造过程中发现，其实在交互方面，Flutter有很多相比起Native缺失的功能，本文会围绕放大镜模式和选区反向选择两个比较重要的交互点来展开说明。

本文将会以官方代码来进行讲解，因为这些优化思路是普适通用的，不与富文本耦合的。

放大镜模式

背景与现状

对于原生控件，不管是Android侧的EditText，还是iOS侧的UITextField，都是默认支持放大镜模式的。将用户进行文本选择时，用户可以通过放大镜来进行精确的光标定位和选区移动。如下图所示：

这无疑会对用户体验起到很大的改善作用，但是目前Flutter提供的TextField控件里并没有对该模式进行支持，早在2017年就有人提出了相关issue。Mural的UI渲染层和Flutter TextField除了在文本的渲染机制上不同之外，其他的交互逻辑是基本保持一致的。所以我们决定模拟Android和iOS双端的放大镜交互，在Flutter文本编辑器中进行放大镜模式的支持。

交互分析

众所周知，Android和iOS有着不同的设计与交互规范，文本编辑控件就是一个很好的例子，不过他们的交互也有相似的地方，我们将会求同存异，尽量满足双端的设计交互规范。一般来说，放大镜控件通常在两个场景会出现，一就是光标定位时，二就是在选区移动时。我们接下来对这两个场景进行分析：

光标定位

对于Android来说，点击EditText进行聚焦之后，通常光标下方会出现一个把手：通过拖曳这个把手来进行光标的定位，而放大镜随着拖曳开始而出现，拖曳结束消失。如图所示：

对于iOS来说，点击UITextField进行聚焦之后，长按，光标会变成一个浮动游标，然后可以直接进行拖曳，便可以进行光标的定位，而放大镜随着拖曳开始而出现，拖曳结束消失。 如图所示：

对于Android来说，选区移动和光标定位非常相似，通过