Flutter开发之支持放大镜的输入框功能实现

功能需求

最近需求开发中遇到一个flutter开发问题，为了优化用户输入体验。产品同学希望能够在输入框支持在移动光标过程中可以出现放大镜功能。原先以为是一个小需求，因为原生系统上ios和安卓印象中是自带这个功能的。在实施开发时才发现原来并不是这样的，flutter好像并没有去支持原有的功能。

需求调研

为了确认官方是否支持了输入框放大镜功能，去github项目上搜索issue后发现这个问题在18年就有人提到过，但官方却一直没有去支持实现。

既然官方没有支持，秉承有*我就用的思想继续通过github搜索是否有开发者自定义实现了这个功能。

搜索magnifier找到了一篇文章是对放大镜的实现，但他并不是在输入框上的实现，只对屏幕手势触摸的地方进行放大。

因为找不到完全实现输入框放大镜功能，那么只能自行去实现该功能了。可以根据magnifier来为输入框实现放大镜功能。

需求实现

通过对textfield的使用会发现，当使用光标双击或是长按会出现texttoolbar功能栏，随着光标的移动，上方的编辑栏也会跟着光标进行移动。这个发现正好能够在放大镜功能上运用：跟随光标移动+放大就能够实现最终期望的效果了。

源码解读

那么在功能实现之前就需要阅读textfield源码了解光标上方的编辑栏是如何实现并且能够跟随光标的。

ps:源码解析使用的是extended_text_field，主因是项目中使用了富文本输入和显示。

extendedtextfield输入框组件源码找到extendededitabletext中视图build方法可以看到compositedtransformtarget和_toolbarlayerlink。而这两个已经是实现放大镜功能的关键信息了。

关于compositedtransformtarget的使用可以在网上搜到很多，作用是来绑定两个view视图。除了compositedtransformtarget之外还有compositedtransformfollower。简单理解就是compositedtransformfollower是绑定者，compositedtransformtarget是被绑定者，前者跟随后者。_toolbarlayerlink就是跟随光标操作栏的绑定媒介。

通过源码查询找到_toolbarlayerlink另一个使用者extendedtextselectionoverlay。

通过源码查询可以找到compositedtransformfollower组件使用，可以通过代码看到selectioncontrols!.buildtoolbar就是编辑栏的实现。

然后返回去找selectioncontrols是如何实现的。在_extendedtextfieldstate中build方法中可以找到textselectioncontrols默认创建。由于安卓和ios平台存在差异性，因此有cupertinotextselectioncontrols和materialtextselectioncontrols两个selectioncontrols。

这里就只看materialtextselectioncontrols源码实现。布局实现在_textselectioncontrolstoolbar中。_textselectionhandlepainter是绘制光标样式的方法。

功能复刻

了解源码功能之后就能拷贝materialtextselectioncontrols实现来完成放大镜功能了。同样是继承textselectioncontrols,实现materialmagnifiercontrols功能。

主要修改点在_magnifiercontrolstoolbar的实现以及materialmagnifier功能

magnifiercontrolstoolbar

其中的build方法返回了widget.endpoints光标的定位信息，定位信息去计算出偏移量。最后将两个光标信息入参到materialmagnifier组件。

materialmagnifier

materialmagnifier是参考widget magnifier放大镜的实现。这里是引入了安卓的一些布局参数来实现，ios是另外定制了布局参数可以参考flutter官方源码定制ios布局。

放大镜实现方法主要是backdropfilter和imagefilter来实现的，根据matrix4做scale和translate操作完成放大功能。

交互优化

实现放大镜功能之外还需要控制显示，由于在拖动状态下才显示放大镜，隐藏操作栏功能，因此需要去监听手势状态信息。

手势监听是在_textselectionhandleoverlaystate中，需要去监听onpanstart、onpanupdate、onpanend、onpancancel这几个状态。

状态	行动
onpanstart	隐藏操作栏、显示放大镜
onpanupdate	显示放大镜，获取到偏移信息
onpanend	显示操作栏、隐藏放大镜
onpancancel	显示操作栏、隐藏放大镜

在开始拓展手势时展示放大镜，隐藏操作。_buildermagnifier嵌套在overlayentry组件在overlay上插入，实现方式是和操作栏完全一样的。

同理在拖拽结束时去隐藏放大镜，重新创建操作栏恢复显示。

最终效果

最后实现效果如下，通过移动光标可显示放大镜功能，松开手势就是操作栏显示恢复。

以上就是flutter开发之支持放大镜的输入框功能实现的详细内容，更多关于flutter的资料请关注其它相关文章！