接上篇:https://developer.aliyun.com/article/1225954?spm=a2c6h.13148508.setting.24.595d4f0eudDbz0
二、 选区支持反向选择
1. 背景与现状
在平时的使用中我们注意到,iOS的UITextField是支持反选的,即在操作右边把手时,可以一直往左边拖动,超过左边把手时,把手的位置会进行一个互换,可以继续操作左边的把手。而Android很多厂商也支持了这一特性。但是我们发现在Flutter TextField中,这个操作是被禁止使用的。
所以我们决定在富文本编辑器中支持选区的反向选择。
2. 交互分析
对iOS以及一些支持反向选择的Android机型的交互进行分析之后,以右边把手往左边移动为例,有两种交互。一种是在左右把手交汇的时候交换两个把手的位置,继续往前选择移动的是左边样式的把手。还有一种交互是,左右把手交汇的时候不改变两个把手的位置,在拖动结束之后,如果发现右边把手在左边把手的前面,再进行交换。
结合Flutter TextField的改造成本以及用户的操作连续性,我们决定采用第二种交互方式,当然iOS端应该保持UITextField的第一种方式,这个会在后续进行继续对齐和优化。
3. 代码实现
可能很多读者会猜想,是不是在背景中介绍到那行代码给删掉,就可以实现这个Feature的支持。一开始和大家的想法一样,但是出现了很多问题,接下来会进行具体实现和分析。
上面有说到,去除掉TextField之后,出现了一些问题。第一个就是,两个把手交汇的时候,两个把手都消失了,变成了光标形态。原因是因为在Flutter TextField中,选区把手和光标把手(仅Android,iOS光标形态没有把手)是在同一个地方实现的,当左右选区交汇时,会自动切换成光标形态,导致无法进行反选。
1) 如何在选区交汇时不切换为光标形态?
我们当然不可能删除这个规则,因为在设定中,本来光标就是收缩态的选区,如果完全删除,那光标态也不可能存在了,因为左右选区收缩到一起时,一定会展示左右两个把手,这就有点舍本求末了。
所以在绝大部分情况下我们是需要这个规则的,但是又想实现反选,自然而然会想到,设定一个标记位来标识我们正在操纵选区把手,当处于这种场景下,左右把手交汇时,我们就不将其转化为光标形态。
a) 设定标记位表示把手拖动状态
b) 处于该状态时,选区收缩时展示展开态
解决了这个问题,我们还剩下一个问题,反选完成之后,如何交换两个把手。
2) 如何在反选完成之后保证正确的选区把手样式?
我们需要在在TextSelectionOverlay中的展示把手组件的TextSelectionHandleOverlay进行实现,新增一个_handleDragEnd方法,交换selection的baseOffset和extentOffset
4. 效果展示
原文为gif
接下篇:https://developer.aliyun.com/article/1225950?groupCode=idlefish