Flutter学习Day4 Widget 观念 StatefulWidget

今天要来介绍StatefulWidget啦
从字面上看起来就是 有状态的部件(取名字真的很重要)

when??

甚麽时候会用到呢??
就是当需要记录状态的时候
此时我们就必须采用StatefulWidget

比如说
一台新阿姆斯特朗旋风喷射阿姆斯特朗炮正在装填炮弹
就会把装填炮弹的状态记录起来
让我们知道
这个炮台Widget现在不能发射 因为还没装好炮弹

当从Widget 的蓝图 实例出一个 元素後
这个元素需要有自己的状态
元素就会问Widget
你能够帮我做一个状态的物件给我吗?
createState这个方法呢 就会生产出一个状态物件
让元素去维持住这个状态

图一

图二

官方是用计数器来当作范例

接下来
我们要将一个原本没办法无法随着时间推移更改技术的Widget改成一个有状态的Widget

Stateless

class ItemCount extends StatelessWidget {
  final String name;
  final int count;
  ItemCount({this.name, this.count});
  @override
  Widget build(BuildContext context) => Text('$name: $count');
}

Stateful

class ItemCounter extends StatefulWidget {
  final String name;
  ItemCounter({this.name});
  @override
  State<StatefulWidget> createState() => _ItemCounterState();
}

class _ItemCounterState extends State<ItemCounter> {
  int count = 0;
  @override
  Widget build(BuildContext context) => Text('${widget.name}: $count');
}

我们可以看到 StatelessWidget需要 implement build方法
而StatefulWidget 需要 implement createState方法

接下来我们需要有一个onTap的动作来记录我们计数器总共点了几下

class _ItemCounterState extends State<ItemCounter> {
  int count = 0;
  @override
  Widget build(BuildContext context) =>  GestureDetector(
        onTap: () => {
          setState(() => {count++})
        },
        child: Text('${widget.name}: $count'),
      );
}

所以当我们点击一下屏幕 count就会+1
下一祯的时候
Stateful Element 会 Call 状态物件里的 build方法
去产生一个 内容为 tom:1 的Text文本
从而取代 tom:0 的Text文本

有趣的是
State Object 会依附在 元素树上
即使 itemCounter (name:'Tom')替换成新的类别相同的 widget(name:'Dan')
状态还是会保持在 1

首先先抽换ItemCounter

再抽换Text文本

由此可知
在抽换widget时
state一直都维持住

这就有点像是方程序赛车在比赛的时候
进入维修站
快速的补给及更换部件
但还是保持在比赛的这个状态

好啦
又到了小弟弟说再见的环节
下一篇会针对myPet的小专案
实做一个StatefulWidget
ㄅㄅ

参考

Google Developers YT