Flutter 手势探索,用你的手指,掌控着整个屏幕世界 ~
万花过尽知无物 @ 编程之王
加入学习群
免费试学
936 人加入学习
15 小节
·
免费试学
介绍
目录
评论

小册介绍

1.欢迎来到 Flutter 手势探索 - 执掌天下

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


为什么要写这本小册

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

2. 小册内容概述(上)

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

  • 竖直拖拽手势:在 第 3 章 会实现可随竖直手势拖拽伸缩的弹簧,放手时恢复原长的展示效果。是一个手势入门体验的绝佳案例。


  • 点击相关手势:在 第 4 章 会通过一个有趣的案例介绍关于点击的事件。比如下面按下时添加一个灰色的图章;抬起时变为蓝色;按下后,如果发生移动,会触发触点的取消事件,来去除按下的图章。如何根据触点的回调,来维护界面的数据,使之呈现出来,这是一个比较综合的能力。


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

2021年04月08日22-18-00


  • 拖拽手势 : 在 第 5 章 ,会完成白板绘制的效果。根据按下和抬起维护线段列表,就可以实现手势移动时的白板绘制。如下,为了有更好的体验,支持颜色和线宽的选择。


  • 长按手势:这个白板是逐步完善的,从点收集的优化,到曲线拟合,再到颜色、线宽的选择,最后到长按拖拽 ,每个步骤都非常明确,你可以跟着本册,一步一个脚印,一点点完成。


  • 变换手势 :在第 6 章 ,开始会介绍如下基于 scale 相关回调进行的 缩放旋转平移 变换操作。

    缩放旋转平移

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


3. 小册内容概述(下)

如果你熟悉了这些案例,那么对 Flutter 手势使用方面也算炉火纯青了。当然本册并不止于此,我会尝试去分析整个 Flutter 手势体系 的源码,包括 手势相关组件手势检测器一族 以及手势竞技相关源码的探索。
自己看源码是一件非常痛苦的事,大多数人都没有耐心和能力去深究源码的。对于 Flutter 手势体系来说,我已经体验完了这些痛苦,现在把我的认知分享出来,着就会更有意义。如果说读源码的本身是夜中行舟,那么过来人的经验便是一座灯塔。人类对于世界的认知形成的科学体系,也正是如此一代代地传承、演进、推翻、升华的螺旋上升。


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

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

前置知识有什么?

  • 了解 Flutter 中的手势的使用,会创建 Flutter 项目。
  • Dart 基础语法。
  • 一颗心平气和,勇于探索的心。

你会学到什么?

  • Flutter 中各种手势的使用,锻炼逻辑处理能力。
  • 认识 GestureDetectorRawGestureDetectorListener 组件的内部源码实现。
  • 了解手势检测器的使用及如何自定义手势检测器。
  • 了解 Flutter 中手势竞技场的相关概念及多手势的竞技流程。
  • 了解 Flutter 的 hit-test 及事件分发的概念。

适宜人群

  • 想要提升自身读码能力或有兴趣探索源码的朋友
  • 想要使用体会编程乐趣的开发者
  • 想要全面了解 Flutter 框架层手势体系的工程师

作者介绍

  • 张风捷特烈,喜欢数学文学编程
  • 掘金博主,热爱分享知识,骨灰级灵魂画手。
  • Flutter 开发工程师,Android 开发爱好者 。
  • FlutterUnit 开源项目作者。
  • 著有实体书《Flutter 之旅》、小册 《Flutter 绘制指南 - 妙笔生花》
  • 公众号 编程之王

购买须知

  1. 本小册为图文形式内容服务,共计 15 节;
  2. 全部文章预计 2021 年 05 月 09 日更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
推荐小册
京ICP备18012699号-3 ©版权所有 北京北比信息技术有限公司

公司地址:北京市海淀区信息路甲28号13层B座13B-5 | 公司座机:010-83434395