【 Flutter 手势探索】我的第二本小册来了

2022-03-08 15:31:18 浏览数 (1)

1.欢迎来到 Flutter 手势探索

继 《Flutter 绘制指南 - 妙笔生花》 小册之后,经过小半年的业余时间:从整体构思代码案例实现,从源码调试分析码字,我的第二本小册 《Flutter 手势探索 - 执掌天下》 终于和大家见面了。

2. 想说在前面的话

手势绘制动画布局 四个大部分是界面构成交互体验的核心,一切可视的展现交互的触发都脱离不了这四者。 Flutter 作为一个优秀的跨平台框架,但很多人对他并没有全面的认知,只停留在表面的使用上。如果需求的 UI 表现没有内置组件 支持,就无法继续进行,只能找三方库,找不到的话就只能止步于此。这就很容易达到一个瓶颈期: 绘制不会画手势不太懂动画不会做布局一团糟

其实无论是 Flutter 、iOS 、Android 也好,Dart 、Swift、 Koltin 也罢,框架语言本身都只是 工具 。而作为工具,就必定要服从于人,以致其表现的价值会因使用者的能力而出现云泥之别。比如说刀,刀因类型不同而作用不同,可削木、可切菜、可解牛、可雕花。但无论是何种刀,都脱离不了 工具 的范畴,而工具的最终目的是为了拓展人的能力,是为了解决问题。这时,人就一定要起到主观的能动性经验技法 的差异就让使同样刀的人,在解决问题时出现优劣之别

如果一个工具会和你朝夕相伴,或可能成为你饭碗的时候,那你对这个工具再怎么深入研究都是不为过的,因为我们就是干这个的。一个演员,台上三分钟,台下十年功。说出流利的台词、克服表演中的重重困难、研究各种表现形式,本就是一个演员的本分。如果只是流于表面,那和流量明星 就没什么区别。既然是干这个的,我们自然角色就绝不仅仅是一个使用者,对工具的认识了解,是工具使用者最基础的能力。

思考是非常重要的过程,这是我们作为 而言得天独厚的能力,思之愈甚,得之愈深,人的 经验 就是在不断地探索与尝试中通过思考而凝结的。当完整解决一个问题后,在遇到与之类似的问题时,就会产生自己的预判,分析问题可行性,来初步构想解决方案。自己的经验是宝贵的,别人的经验只能是别人的,这也是为什么我很不喜欢:别人打着 “不懂就问” 的旗号,自诩 “刚刚入门” 为由,只要遇到点问题,就 “不耻下问”。无论是学习还是解决问题,独立自主的思考永远都要排在首位,而 求教询问 一定要建立在自己对为问题的足够思考认知之上,以探讨的姿态和他人想法交涉,这也是对别人最起码的尊敬。绝非是一味抛出问题索求答案 的粗劣行径。

3. 手势操作的价值

对于设备中的应用而言,手势 对于可操作性 而言非常重要。试想一下,如果界面无法响应手势,那很就难与用户 产生交互。就像门没有钥匙孔,电脑没有键盘,是无法完成使用需求的,手势响应是应用可交互的前提。当然除了手势事件外,还有很多其他的场景可以触发事件,比如鼠标事件键盘事件语音事件等,不过本册讨论的主体是手指事件。

在一个界面中,小到一个按钮的点击、复选框的选择,大到白板绘制的控制、视口的滚动,都或多或少存在手势操作的身影。界面通过事件响应向用户提供操作的可能性。这些操作绝大多数是由手势接触触发的,无论是单击双击长按拖拽,还是双指缩放双指旋转滑动。其根源都是对用户触点进行响应,触发相关逻辑处理。总的来说手势非常重要,它和应用的关系,就相当于电和电视的关系,没有电,电视将毫无使用价值。

工具可以产生的价值一半源于工具本身,它为功能实现提供了可能性;还有一半源于使用它的人。Flutter 的手势响应主要是 GestureDetector 提供的回调,让使用者有处理事件的 可能性。工具非常公平,它对于所有人都是一样的,但它具体可以干什么,这完全取决于使用工具的。其实跳出 Flutter 的局限,无论是 Android,还是 web 平台,只要找到对应的工具,那么人的能力就能施展。就像刀具虽然不同,但是雕刻大师只要找到一把刀,他的经验技法就有用武之地。对于广大的编程者而言,语言和框架也仅是工具,它对于所有人都是平等的。而我们的 经验技法 就是在解决问题中积累的认知思想,在读码中见证的风采境界

4. 小册内容概述 - 使用层

本册的整体结构非常简单,主要围绕着两个主题:手势回调的使用手势相关源码的探索。其中 1 ~ 6 章 会通过几个有趣的案例,来讲述一下各种手势回调如何使用。

  • 竖直拖拽手势:在 第 3 章 会实现可随竖直手势拖拽伸缩的弹簧,放手时恢复原长的展示效果。是一个手势入门体验的绝佳案例。
  • 点击相关手势:在 第 4 章 会通过一个有趣的案例介绍关于点击的事件。比如下面按下时添加一个灰色的图章;抬起时变为蓝色;按下后,如果发生移动,会触发触点的取消事件,来去除按下的图章。如何根据触点的回调,来维护界面的数据,使之呈现是一个比较综合的能力。

继手势添加图章后,我们会逐步实现如下井字棋的案例,包括棋子的胜负判定逻辑。这个案例更为综合,更能锻炼你对数据和逻辑的把握。可以让你更好地体会到手势改变数据,数据决定展现的奥义。

  • 拖拽手势 : 在 第 5 章 ,会完成白板绘制的效果。根据按下和抬起维护线段列表,就可以实现手势移动时的白板绘制。如下,为了有更好的体验,支持颜色和线宽的选择。
  • 长按手势:这个白板是逐步完善的,从点收集的优化,到曲线拟合,再到颜色、线宽的选择,最后到长按拖拽 ,每个步骤都非常明确,你可以跟着本册,一步一个脚印,一点点完成。
  • 变换手势 :在第 6 章 ,开始会介绍如下基于 scale 相关回调进行的 缩放旋转平移 变换操作。 缩放 旋转 平移

最终我们将基于前面的画板和缩放手势,实现如下可以进行变换的 无限画板,之所以成为无限,是因为,你可以进行拖拽、缩放、旋转将画布移到任意位置去绘制。

5. 小册内容概述 - 源码层

如果你熟悉了这些案例,那么对 Flutter 手势使用方面也算炉火纯青了。当然本册并不止于此,我会尝试去分析整个 Flutter 手势体系 的源码,包括 手势相关组件手势检测器一族 以及手势竞技相关源码的探索。

自己看源码是一件非常痛苦的事,大多数人都没有耐心和能力去深究源码的。对于 Flutter 手势体系来说,我已经体验完了这些痛苦,现在把我的认知分享出来,着就会更有意义。如果说读源码的本身是夜中行舟,那么过来人的经验便是一座灯塔。人类对于世界的认知形成的科学体系,也正是如此一代代地传承、演进、推翻、升华的螺旋上升。

源码的分析主要分为三个阶段:

  • 【1】第 7~8 章 介绍 GestureDetector 组件和 RawGestureDetector 组件的源码实现,并从源码中引出手势识别器 GestureRecognizer ,推进剧情发展。
  • 【2】第 9~10 章 是分别对 GestureRecognizer手势竞技 方面的源码总览,作为储备知识,方便之后调试分析。这两个适合在读完本册后,重新回读一遍。
  • 【3】第 11 ~ 15 章 是结合源码调试分析的手势竞技核心内容,主要分析了单击和双击两个手势检测器的工作流程,在第 13 章,通过简单的漫画场景分析了双击和单击手势检测器调试存在的竞争情况。比如下图,这样的场景更容易让我们形象地认知整个竞技的流程。第 15 章 探索了 Listener 组件触发事件的源头,能让我们对 Flutter 中 RenderObject 的点击测试有个认知,了解 Flutter 中的触点事件是如何分发, Listener 组件又是如何响应的。
6. 尾声

为什么要写这本小册

  • 绝大多数人只停留在对 GestureDetector 的基本事件响应。通过本册,我将会结合有趣的案例、源码调试、画图分析等方式,让大家对 Flutter 手势体系 有更深入的了解。
  • 目前并没有非常系统介绍 Flutter 手势 的专题文章,希望通过本册,将我的探索收获分享给大家。
  • 稍微深入一些源码的文章,发普通的文章总感觉曲高和寡,关注度比较低,写成小册更方便整体传播。
  • 定价一如常往,3.5 元, 赚点钱买饮料、吃饭加个鸡腿 ~

致歉

也许有些朋友并不喜欢别人以较高姿态对其进行说教,在此我表示歉意。这里只是分享一下我的思考与认知,并非什么绝对的正误,你可以保留自己观点,报持自己独立的思维也是一件非常重要的事。 最后一句:由于纯手工码字以及认知的局限性,如果本册内容上有什么错误疑问错别字修改建议,可在评论区指正,或直接联系我进行探讨 ~

0 人点赞