闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇(中)

简介: 闲鱼技术2022年度白皮书-Flutter主题-Flutter富文本编辑器系列文章3——交互篇

接上篇:https://developer.aliyun.com/article/1225954?spm=a2c6h.13148508.setting.24.595d4f0eudDbz0


二、 选区支持反向选择

 

1. 背景与现状

 

在平时的使用中我们注意到,iOS的UITextField是支持反选的,即在操作右边把手时,可以一直往左边拖动,超过左边把手时,把手的位置会进行一个互换,可以继续操作左边的把手。而Android很多厂商也支持了这一特性。但是我们发现在Flutter TextField中,这个操作是被禁止使用的。

 

image.png


所以我们决定在富文本编辑器中支持选区的反向选择。

 

image.png


2. 交互分析

 

对iOS以及一些支持反向选择的Android机型的交互进行分析之后,以右边把手往左边移动为例,有两种交互。一种是在左右把手交汇的时候交换两个把手的位置,继续往前选择移动的是左边样式的把手。还有一种交互是,左右把手交汇的时候不改变两个把手的位置,在拖动结束之后,如果发现右边把手在左边把手的前面,再进行交换。

 

结合Flutter TextField的改造成本以及用户的操作连续性,我们决定采用第二种交互方式,当然iOS端应该保持UITextField的第一种方式,这个会在后续进行继续对齐和优化。

 

3. 代码实现

 

可能很多读者会猜想,是不是在背景中介绍到那行代码给删掉,就可以实现这个Feature的支持。一开始和大家的想法一样,但是出现了很多问题,接下来会进行具体实现和分析。

 

上面有说到,去除掉TextField之后,出现了一些问题。第一个就是,两个把手交汇的时候,两个把手都消失了,变成了光标形态。原因是因为在Flutter TextField中,选区把手和光标把手(仅Android,iOS光标形态没有把手)是在同一个地方实现的,当左右选区交汇时,会自动切换成光标形态,导致无法进行反选。

 

1) 如何在选区交汇时不切换为光标形态?

 

我们当然不可能删除这个规则,因为在设定中,本来光标就是收缩态的选区,如果完全删除,那光标态也不可能存在了,因为左右选区收缩到一起时,一定会展示左右两个把手,这就有点舍本求末了。

 

所以在绝大部分情况下我们是需要这个规则的,但是又想实现反选,自然而然会想到,设定一个标记位来标识我们正在操纵选区把手,当处于这种场景下,左右把手交汇时,我们就不将其转化为光标形态。

 

a) 设定标记位表示把手拖动状态

 

image.png


b) 处于该状态时,选区收缩时展示展开态

 

image.png


解决了这个问题,我们还剩下一个问题,反选完成之后,如何交换两个把手。

 

2) 如何在反选完成之后保证正确的选区把手样式?

 

我们需要在在TextSelectionOverlay中的展示把手组件的TextSelectionHandleOverlay进行实现,新增一个_handleDragEnd方法,交换selection的baseOffset和extentOffset

 

image.png

 

4. 效果展示

 

image.png

原文为gif

 


接下篇:https://developer.aliyun.com/article/1225950?groupCode=idlefish

相关文章
|
21天前
|
设计模式 前端开发 测试技术
Flutter 项目架构技术指南
探讨Flutter项目代码组织架构的关键方面和建议。了解设计原则SOLID、Clean Architecture,以及架构模式MVC、MVP、MVVM,如何有机结合使用,打造优秀的应用架构。
Flutter 项目架构技术指南
|
3月前
|
安全 Go 数据安全/隐私保护
Flutter开发笔记:Flutter路由技术
Flutter开发笔记:Flutter路由技术
281 0
|
29天前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
3月前
|
存储 容器
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
Flutter 应用服务:主题、暗黑、国际化、本地化-app_service库
62 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
18天前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
46 2
|
1月前
|
Linux 编译器 开发工具
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
Linux:详解(yum的使用、vim编辑器命令集合以及gcc/g++编译器的使用)
109 1
|
1月前
|
Linux Shell 开发工具
【linux】Linux编辑器-vim
【linux】Linux编辑器-vim
29 0
|
3月前
|
Linux 开发工具
linux vim-编辑器常用指令
linux vim-编辑器常用指令
31 0
|
25天前
|
机器学习/深度学习 数据可视化 Unix
2023最全vim编辑器教程(详细、完整)-编辑器之神
2023最全vim编辑器教程(详细、完整)-编辑器之神