Flutter最佳入门--计算器
Flutter的入门文档给予了我很大的启发,它并没有把API文档或者是整个框架的内容直接展现给初学者,而是通过一个简单的计数器例子,从基础的组件到手势的监听,再到状态的改变,将Flutter最核心的思想展现的淋漓尽致。
我见过许多初学者,喜欢先将入门文档、API文档和教学视频一字不漏地全部看完,却从来没有打开编辑器,哪怕写上一句Hello World。
我认为的高效学习的方法是,学习掌握恰到好处可以开始的基础知识,通过操作来深入学习,边玩边学,在这个过程中发现自己不懂的部分,通过查阅资料,掌握不懂的知识,最后将所学知识从大脑中提取出来,以别人能够理解的方式教授给别人。
为什么是计算器?
布局经典,能学会使用最重要几个的Widget用法,迅速掌握常用的布局,如Container、ListView、Row、Column、Expanded、FractionallySizedBox等等。
样式简单,能学会使用最常用的几个布局属性,如padding、color、style、decoration(圆角、描边)、alignment等等。
有输入,能学会手势的捕获以及组件间的数据流动。
有处理,能学会Dart的基本数据类型的用法,如String、List、int、double、num、bool等。
有输出,能学会何时使用StatelessWidget和StatefulWidget。
不依赖UI,不依赖接口,成功运行Hello World就可以立即开发,不要一开始就追求完美,因为它会阻止你行动,要知道「开始做」远比「做好」重要。
如何开发?
1. 【总】观察布局,全局出发。
从全局出发,可以发现是一个Column(垂直)布局,子组件们按照一定的权重分配内部空间。显而易见,顶部Text的权重为2(flex:2),其余子组件ListView和Row的权重均为1(flex:1)。
2. 【分】拆分组件,逐个击破。
拆分组件,可以按照业务逻辑拆分,也可以按照布局是否相同来拆分,在这里笔者选择的是按照布局是否相同来进行拆分,原因是业务逻辑并不复杂,布局可以复用的地方更多。如图所示,以NumberButton组件及NumberButtonGroup组件为例:
3. 【总】整合组件,理清逻辑。
实现每一部分的组件之后,就要回到整体的计算器逻辑,即如何完成输入->处理->输出?
最后
实际上,这是我第一个完整完成的Flutter App,尽管我开发过数十个Android App和微信小程序,但是我很久没有在完成一个项目之后如此兴奋了,我找回了学生时代为了求知而努力学习的感觉。在提炼了自己的学习方法,并付诸行动,得到的收获让人难以置信。