Flutter学习笔记（四）--Flutter几个小知识点

Flutter的Widget采用的是现代化的React风格，该风格的设计灵感来源于React这么语言。最核心的理念是你可以使用Widget设计界面。Widget通过当前的state和注册信息来描述view应该长成什么样子的。当当前的状态发生了变化后，Widget会重新构建。

一、Hello World

void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); } 

上面是一个简单的Widget。
这里，可以总结出如下几点：

• runApp()方法制定了根Widget，其他的Widget都应该是该Widget的子Widget
• 默认会强制根Widget是覆盖全屏幕的
  除此之外，还有：
• 自己创建的Widget应该是StatefulWidget或者StatelessWidget的子类，到底是哪个的子类，取决于该Widget是否需要管理一些state

二、StatefulWidget和State

为什么要将Widget和State分别写到两个类里呢？
上一节最后说到，我们将状态管理放到Widget里，是有问题的，有什么问题呢？这里在Widget和State里分别添加一个num属性，我每点击一次，对两个的num都加1，代码如下：

class _ParentWidget extends StatefulWidget { bool active = false; var num = 0; @override State<StatefulWidget> createState() => new _ParentWidgetState(); } class _ParentWidgetState extends State<_ParentWidget> { void _handleTapboxChanged(bool newValue) { setState(() { widget.active = newValue; }); } @override Widget build(BuildContext context) { print("Parent State:${widget.num}"); widget.num += 1; // TODO: implement build return new Container( child: new TapboxC(onChanged: _handleTapboxChanged, active: widget.active), ); } } typedef void changedValue(bool newValue); class TapboxC extends StatefulWidget { var num = 0; final bool _active; bool _highlight = false; changedValue changed; // final ValueChanged<bool> onChanged; TapboxC({Key key, bool active, @required changedValue onChanged}) :this._active = active, this.changed = onChanged, super(key: key) { } @override State<StatefulWidget> createState() { print("TapBoxC createState"); return new _TapboxCState(); } } class _TapboxCState extends State<TapboxC> { var num = 0; void _handleTap() { widget.changed(!widget._active); } void _handleTapDown(TapDownDetails details) { setState((){ widget._highlight = true; }); } void _handleTapUp(TapUpDetails details) { setState((){ widget._highlight = false; }); } void _handleTapCancel(){ setState((){ widget._highlight = false; }); } @override Widget build(BuildContext context) { print("_TapboxCState build:${widget.num}, this num:$num"); num += 1; widget.num += 1; // TODO: implement build return new GestureDetector( onTap: _handleTap, onTapDown: _handleTapDown, onTapUp: _handleTapUp, onTapCancel: _handleTapCancel, child: new Container( width: 200.0, height: 200.0, decoration: new BoxDecoration( color: widget._active ? Colors.lightGreen[700] : Colors.grey[600], border: widget._highlight ? new Border.all(color: Colors.teal[700], width: 10.0) : null, ), ), ); } } 

最后的结果如下：

image.png

你会发现，TapboxC的num一直在0和1之间跳动，而ParentWidget和TapboxCState的num都是递增的。这是为什么呢？
首先明确的是，每次回调改变ParentWidget的State时，都会重新初始化一次TapboxC，所以它的num每次都会变为0就不奇怪了，而因为ParentWidget并没有改变，所以会递增。
可能又有疑惑，那么为什么TabboxCState的num就不归0呢？
其实这都是和Widget和State 的生命周期有关。Widget相当于时一个暂时的对象，只是为了展示和布局当前状态时用的，一旦状态发生了改变，它就会失效；而State从某种角度来说是个永久对象，它里面存储了一些必要信息，这其实也是React的一个特性，即每次通过比较，只更新和修改差异化的东西。