闲鱼技术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天前
|
SQL 分布式计算 大数据
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
22 10
|
21天前
|
新零售 前端开发 小程序
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
20 2
|
21天前
|
Web App开发 新零售 前端开发
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
27 1
|
12天前
|
Kubernetes Cloud Native 搜索推荐
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
|
3月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
4月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
2天前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
17 6
|
19天前
|
开发框架 Android开发 iOS开发
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
|
1月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
76 1
|
19天前
|
Dart Android开发 iOS开发
Flutter相关痛点解决问题之提升开发效率如何解决
Flutter相关痛点解决问题之提升开发效率如何解决