闲鱼技术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

目录
打赏
0
0
0
0
366
分享
相关文章
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
104 1
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
Flutter技术实践问题之Flutter应用过程中的基础建设如何解决
44 10
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
Flutter技术实践问题之基于Flutter的Canvas的应用优势如何解决
51 2
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
Flutter技术实践问题之阿里集团内Flutter体系化建设如何解决
55 1
探索云原生技术:Kubernetes入门与实践打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第31天】云原生技术正改变着应用开发和部署的方式。本文将带你了解云原生的基石——Kubernetes,通过实际的代码示例,从安装到部署一个简单的应用,让你迅速掌握Kubernetes的核心概念和操作方法。无论你是初学者还是有一定经验的开发者,这篇文章都将成为你进入云原生世界的桥梁。
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(8)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(8)
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(10)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(10)
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(9)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(9)
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(7)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(7)
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(6)
本书将详细讲解闲鱼Flutter&FaaS云端一体化架构,以及闲鱼基于Flutter的架构演进与创新,学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践,抽取Flutter依赖到远程的实现细节,以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景,为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南,你还将在......
Flutter技术解析与实战——闲鱼技术演进与创新-第1章(6)

热门文章

最新文章

  • 1
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 2
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
    10
  • 3
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
    6
  • 4
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
    4
  • 5
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    10
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    39
  • 7
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    1
  • 8
    2025年1月推荐-工欲善其事,必先利其器-程序员必备之-核心基本工具—不要看什么国际排行榜-没有用-编辑器和编译器推荐-优雅草央千澈
    11
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    5
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    3
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等