Flutter学习Day2 Widget 观念 StatelessWidget (上)

介绍

只要把Widget想像成一块块的乐高积木或是部件，
当你要建造一台新阿姆斯特朗旋风喷射阿姆斯特朗炮，

你可能需要炮管，炮身，底座，子弹储存球，前列腺高潮动力球?!
这些各部件组合在一起，才能成为一台新阿姆斯特朗旋风喷射阿姆斯特朗炮

学过Angular的小弟弟，看到Widget就直接联想到Component元件，
但是开发者是说他们是受到了React的启发，

看到了语法的部分 的确有点相似
所以观念应该差不多吧?

两棵树

上图所呈现的是flutter 蓝图及屏幕显示的概念
现在我们的应用程序有两棵树
左边是由小部件组成的蓝图
右边是代表屏幕上实际显示的内容及元素
flutter会依照左边的蓝图开始建构及创建元素，直到所有东西都建好，就会开始渲染到屏幕上

这个图很重要，後面的StatefulWidget及Keys的观念都需要此图做辅助说明
所以说如果一个APP的widget设计架构不好，是有可能画成一幅清明上河图的

Widget分类

在google 的 flutter 团队里
它们将Widget 分成
InheritedWidget、ParentDataWidget、StatefulWidget、StatelessWidget、RenderObjectWidget、ProxyWidget、NullWidget...等等

StatelessWidget

今天就先介绍StatelessWidget
StatelessWidget 就是字面上的意思
无状态部件

通常在这个部件里，他的设定都是不变的(immutable)，
也就是数据不用更改或不用重建接口，
因此它们无法随着时间的推移跟踪数据或触发重新自行建置。
开发App到後期，使用到的StatefulWidget会越来越少，而StatelessWidget会越来越多，
原因是因为一直传递数据到子部件甚至到子子孙孙部件会很麻烦，所以会尽量避免这样的设计。

实作小专案

我们来简单建立一个新专案 :我的宠物
我有养三只宠物，分别是 NiChan、麻吉及亮亮。
我想将三只宠物的资讯个别放在App上

在code 第24行 我们宣告一个字串属性 title
final与const的差异是
const在compile-time时载入，final在run-Time时载入
所以在编译时不知道的东西一律都用final，比如 new DateTime.now()

而第三十行的title可以不用加this (TypeScript写太多了会习惯)
在Dart语言中通常会省略this，除非有重复的属性名称冲突了

接下来下 flutter run -d chrome 指令在浏览器上跑跑看

那如果想要把右上角红红的debug拿掉

只要在写入参数debugShowCheckedModeBanner:false
他就消失了

由於listview里包的东西有点多，所以我想改个写法

第一步将宠物们变成一个Pet类别的清单阵列

第二步将Scaffold的body改成ListView builder并将itembuilder method 抽出来 写在上面

这样看起来会相对乾净许多
好啦 小弟弟的累累病发作啦
剩下的就明天继续记录吧
程序码的部分我放在我的github了
有兴趣可以前往看看
Github

参考

Dart官方
Google Developers YT
新阿姆斯特朗旋风喷射阿姆斯特朗炮 伪基百科