阅读 6518

【 Flutter 绘制指南 】那个男人带着小册来了

少年,我看你骨骼精奇,是万中无一的武学奇才开源世界的未来就靠你了。
我这有本秘籍《Flutter 绘制指南》,见与你有缘,就 3.28元 块卖给你了!


1. 想说在前面的话

很多人在逻辑控制力不强的时候就去强攻数据结构算法,然后被虐到怀疑人生
如果几个 for 循环,几个 while 循环,一个递归就能把你绕晕;
如果看代码超过 100 行就受不了了 ;如果经常脑子说会,但是手说不行
那么少年,还是多敲些代码,补一补逻辑的控制能力吧,先把刀磨好再去砍树。

逻辑控制是基础中的基础,在急于求成轮子满地的当下,这确是最容易被忽略的。
要实现一个功能,只需要找库,调用方法就完事了。宇宙能量是守恒的,只要走了捷径,自然要付出代价。太过于依赖三方库,我们失去了很多练习逻辑实现的机会,一般人很少会深入探其原理看其源码,库成了一个黑盒,一旦出错,就只能到处搜索,解决问题。

创造性的编程活动似乎退变成一个搜索的过程,有需求,搜;出问题,搜;没灵感,搜。我们也逐渐遗忘和编程相识的那段最初的美好,从面向对象到了面向搜索。 一方面缺少逻辑的训练,一方面又要无法逃避数据结构、算法的学习,就样的两难很容易将自己逼到死角。我认为绘制对思维和逻辑的训练有很重大的帮助,甚至它可以让你去主动思考一些创造性的想法。


2. 绘制能为我们带来什么

绘制的本身带有操作感,可以让你使用编码的方式对很多问题有视觉上的认知,而这些逻辑在实现的过程中你有很多机会去练习对编码能力。

三次贝塞尔曲线


通过滑动的区域限定、位置的变化计算、位移与角度的计算,你可以让曾经封印已久的数学知识派上用场。控制会带来更多乐趣的体验,可视、可动,也许会让你对编程本身有更深的理解兴趣

控制器监听

刻度尺2


在绘制中,很多细节都需要被考虑,需要很多循环和判断,这些很能锻炼你的思维。比如下面的仪表盘,如何绘制刻度、如何摆正文字、如何绘制指针、如何实现三色等等问题,都可以练习你的编码能力

仪表盘动画


通过绘制,你可以完成很多普通操作很难完成的效果,也能对颜色、图片的操作有一些本质上的认识,而不仅停留于调用一个 API

image-20201101192948940

image-20201109081417079


通过路径可以绘制出函数的图形,你可以通过拟合,用很少的点完成最佳的效果。通过路径测量,可以完成很多不可思议的运动,比如图形伴随曲线运动路径生成动画。这些也很能很有趣地锻炼你对代码逻辑的掌握。

run_path

run_ball


另外通过绘制你可以完成自己的组件,当有需求来临时,你的选择将不止是搜索,还可以尝试自己来完成。当网上找不到满足需求的效果,或者不是完全符合需求,这时你的绘制能力将会给与你底气编程者绝不仅是轮子的使用师,做不成创造者的话,至少也要成为修理师

柱线图

饼图

show1111


通过绘制你也可以对相邻的知识有更深的认识,比如图片动画手势。你可以通过自己的双手来将纷繁的效果以视觉方式展现出来,这也是对自己能力的一种加强。

曲线动画2

image-20201101110636114


也许你会觉得,绘制的本身意义并不是很大。我想说:结果并不是目的,在行动的过程中的成长才是 。绘制的本身是数据的解析再呈现的过程,我们在做的并不仅仅是绘制,还有将数据的获取、解析和展现。只要拥有数据,绘制出任何事物都不是问题。

image-20201104170638619


最后还可以做出酷炫的粒子效果,通过对粒子的操作,可以让你对代码的操纵力达到一个新的水平。粒子可以产生无限的效果,也会将绘制的未来变成无限可能

2020-11-07 14-34-00

2020-11-08 15-29-02


3. 使用者和创造者身份并不冲突

打开你的手机电脑平板,你可视的所有的一切在本质上都是依靠绘制实现的。每个平台都会有自身的绘制体系,平台自身的控件很多时候可能并不能满足设计的需求,也有很多控件是和项目特点高度契合的,所以平台会暴露出绘制的接口给开发者,让开发者对界面元素拥有 高度的可定制性

但凡可定制性的东西,都意味着一定的门槛,这可能会让很多人望而却步,所以绘制这个技能总是被开发者所冷漠,毕竟抱着又不是不能用心态的人不在少数,而且伟大的先驱者们也为我们留下来丰富的资源,这些轮子,装上就能跑,岂不美哉,干嘛费心费力地自己画?

但不要忘记: 用别人的东西,是被约束的一方,用起来束手束脚。而且别人的代码不一定能百分百符合你的需求,很多时候还是需要自己改改,如果你不会绘制的知识,那将非常痛苦。如果找不到能用的轮子,自己的绘制技能又这么蹩脚,那就只能去问,或花钱找别人实现。为什么要让自己混这么惨呢,何不食肉糜?

有轮子自己会绘制并不冲突,就像有钱花拥有挣钱的能力一样,两者可以很好地相辅相成,一旦你懂了,就能更好的去用,甚至去修改轮子来满足自身的设计需求,或发现轮子中的缺点加以改正,使用者和创造者的身份并不冲突。

绘制,是一件纯粹而快乐的事。能让自己的想法在某处以某种形式展现出了,这本身就是一种自我价值的体现,所见即所得。这比只能显示在控制台上的东西更能亲和,你的每一步操作都可以看到成果成就感是学习而言是最有利的因素。


4.为什么是 Flutter 绘制

绘制的本身是没有什么框架、语言限制的,所有的平台绘制的接口都基本一致,也就是说这份技能不依赖平台而存在的,绘制本身是一种自我的能力,更体现一种主观能动性与创造性。我接触过 Android Html5 的绘制,和 Flutter 并没有非常大的差异。所以只要会一个,其他平台上手都会非常容易。

Flutter 作为一个跨平台的全新技术,AndroidiOSmacOSWindowsLinuxWeb 都可以运行,我目前一直在做 Flutter 桌面端和移动端的一个项目,也对 Flutter 的未来有很大的期待。我一直也在为 Flutter 的传播做着力所能及的事,比如维护着 FlutterUnit 开源项目,在掘金发表文章介绍 Flutter 的使用,写了《Flutter之旅》 一书让新手更全面地认识 Flutter 的世界。

Flutter 本身的组件通过组合就拥有无比华丽的效果,这归功于它强大的可复用性。一个组件封装好了,可以很容易再去使用,或分享给别人使用。这也是为什么 Flutter 的绘制要显得比 Android 更重要,因为画出来,直接就可以分享出来用了,每个人都可以高度的定制自己的表现,或复用别人的组件。这显然是值得振奋的,也希望能有更多的人能创造出好用的组件,一起使用,共同维持 Flutter 的生态。

最重要的一点! FLutter 绘制的组件没有平台性,可以在六端复用!!!
最重要的一点! FLutter 绘制的组件没有平台性,可以在六端复用!!!
最重要的一点! FLutter 绘制的组件没有平台性,可以在六端复用!!!


5.为什么要写这本小册

  • 目前并没有对 Flutter 绘制有系统介绍的专题文章。
  • 希望让更多人能看到 Flutter 绘制 也拥有无限的可能性。
  • 很多人在 Flutter 中使用绘制的方式是有问题的。
  • 想要总结一下自己的绘制技能吧,顺便分享给大家
  • 希望有更多的人能够拥有绘制的勇气技艺
  • 希望你通过绘制可以回忆起或拥有曾经和编程那最初的美好

为什么不在专栏发免费的文章

  • 希望能够比较系统的进行成文,专栏文章比较零散,很难传播。
  • 发文的关注度比较低,写成小册可能会有更多人看到。
  • 写小册能赚点钱买饮料吧,本册定价是3.28元,也是良心价了。

6.小册整体结构

小册主要分为三个部分 :

  • 开始对绘制的 API 进行讲解,包括Paint 篇Canvas 篇Path篇Color 篇。 在这四的大篇章中,我们的绘制是纯粹的,其中你将认识到 Flutter 中关于绘制 95% 的操作方法。

  • 如何通过对 CustomPainter 的全面认知来让你知道如何正确的使用和刷新画板,毕竟目前很多人都是通过 setState,但这并不是最佳的方案。我通过阅读源码中对 CustomPainter 的使用看到了最高效的用法。接下来是对动画和手势的介绍,到此为 Flutter 的绘制打下所有的基础。

  • 后面三个大章节,是对绘制技巧的联系,包括 路径篇图表篇粒子篇,你将会真正进入到一个有趣而多彩的绘制世界,你将学会很多绘制的技巧和锻炼自己逻辑的机会。

下面来一起开始进入 Flutter 的绘制世界吧!

2020-11-07 16-30-15


最后给小册一个特写: 一起来绘制吧!

END ~
@张风捷特烈 2020 年 11 月 11 日