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

张风捷特烈

发布于 2020-11-12 10:24:08

5680

发布于 2020-11-12 10:24:08

文章被收录于专栏：Android知识点总结

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

1. 想说在前面的话

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.为什么是 Flutter 绘制

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

Flutter 作为一个跨平台的全新技术，Android、iOS、macOS、Windows、Linux、Web 都可以运行，我目前一直在做 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 的绘制打下所有的基础。
后面三个大章节，是对绘制技巧的联系，包括 路径篇、图表篇、粒子篇，你将会真正进入到一个有趣而多彩的绘制世界，你将学会很多绘制的技巧和锻炼自己逻辑的机会。