flutter-StatelessWidget与StatefulWidget

StatelessWidget和StatefulWidget是flutter的基础组件，日常开发中自定义Widget都是选择继承这两者之一。

两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件，比如标题栏中的标题；而StatefulWidget则是面向可能会改变UI状态的控件，比如有点击反馈的按钮。

StatelessWidget就没什么好研究的了，StatefulWidget的创建需要指定一个State，在需要更新UI的时候调用setState(VoidCallback fn)，并在VoidCallback中改变一些变量数值等，组件会重新build以达到刷新状态也就是刷新UI的效果。

官方有个StatefulWidget的例子，通过点击按钮使屏幕上的Text数值逐渐增长，可以很好理解StatefulWidget的使用

复制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

class Counter extends StatefulWidget { // This class is the configuration for the state. It holds the // values (in this nothing) provided by the parent and used by the build // method of the State. Fields in a Widget subclass are always marked "final". @override _CounterState createState() => new _CounterState(); } class _CounterState extends State<Counter> { int _counter = 0; void _increment() { setState(() { // This call to setState tells the Flutter framework that // something has changed in this State, which causes it to rerun // the build method below so that the display can reflect the // updated values. If we changed _counter without calling // setState(), then the build method would not be called again, // and so nothing would appear to happen. _counter++; }); } @override Widget build(BuildContext context) { // This method is rerun every time setState is called, for instance // as done by the _increment method above. // The Flutter framework has been optimized to make rerunning // build methods fast, so that you can just rebuild anything that // needs updating rather than having to individually change // instances of widgets. return new Row( children: <Widget>[ new RaisedButton( onPressed: _increment, child: new Text('Increment'), ), new Text('Count: $_counter'), ], ); } }

解耦

上面的例子比较简单，当层级多、状态多的情况下，这样的代码会导致阅读性、扩展性较低的不友好情况发生。代码整洁、代码解耦在日常开发中都非常重要，官方也是非常注重这一点，也提供了思路，将按钮和文本控件从Counter分离，Counter负责更新状态，按钮和文本控件只负责显示，这样达到了解耦，保持代码整洁，扩展性也对应提高。

复制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

class CounterDisplay extends StatelessWidget { CounterDisplay({this.count}); final int count; @override Widget build(BuildContext context) { return new Text('Count: $count'); } } class CounterIncrementor extends StatelessWidget { CounterIncrementor({this.onPressed}); final VoidCallback onPressed; @override Widget build(BuildContext context) { return new RaisedButton( onPressed: onPressed, child: new Text('Increment'), ); } } class Counter extends StatefulWidget { @override _CounterState createState() => new _CounterState(); } class _CounterState extends State<Counter> { int _counter = 0; void _increment() { setState(() { ++_counter; }); } @override Widget build(BuildContext context) { return new Row(children: <Widget>[ new CounterIncrementor(onPressed: _increment), new CounterDisplay(count: _counter), ]); } }