先来看看准备界面：
image.png
目标是修改图中红色实线框中的喜欢和不喜欢的五角星的修改，以及数字的修改。
在修改之前，有必要先了解一些相关的信息。
知识点
前面简单的提到过，有些Widget是Statful（有状态的），而其他的一些是Stateless（无状态的）。比如继承自StatefulWidget的有Checkbox、Radio、Slider、Form等，这些Widget用户都是可以做一些交互的,同样的继承自StatelessWidget的Widget有Text、Icon等。有状态和无状态的主要区别在于：有状态的Widget在其内部都有一个state用来标记是否发生了变化，然后调用setState()方法来更新自己。
创建Stateful Widget
关键点：
1、创建一个Stateful Widget需要两个类，分别继承自StateFulWidget和State
2、state对象包含了widget的state和widget的build()方法
3、当widget的state改变了的时候，state对象会调用setState()方法，告诉框架去重绘widget。
到这里，其实也可以明白，只有Stateful的Widget才能修改其内容，所以要想实现上面的目标，必须将原来的Icon和Text这两个Stateless的Widget替换成Stateful类型的Widget。
所以我们必须实现两个Stateful类型的Widget，没个Widget都应该包含下面两个点：
- 一个StatefulWidget的子类，并且实现了createState()方法；
- 一个State的子类，并且实现了build()方法。
如果足够留意，会发现主函数里就是一个StatefulWidget。
代码
搞清楚了上面的，然后结合官方文档，基础的架子如下：
class FavoriteWidget extends StatefulWidget { @override State<StatefulWidget> createState() => new _FavoriteWidgetState(); } class _FavoriteWidgetState extends State { @override Widget build(BuildContext context) { // TODO: implement build return null; } } 完整的代码如下所示：
class FavoriteWidget extends StatefulWidget { @override State<StatefulWidget> createState() => new _FavoriteWidgetState(); } class _FavoriteWidgetState extends State { var _isFavorited = true; // 是否喜欢 var _favoriteCount = 41; // 喜欢个数 _toggleFavorite() { setState((){ if(_isFavorited) { _favoriteCount -= 1; } else { _favoriteCount += 1; } _isFavorited = !_isFavorited; }); } @override Widget build(BuildContext context) { return new Row( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: <Widget>[ new Container( padding: const EdgeInsets.all(0.0), margin: const EdgeInsets.all(0.0), child: new IconButton(icon: (_isFavorited ? new Icon(Icons.star) : new Icon(Icons.star_border)), onPressed: _toggleFavorite, color: Colors.red), ), new SizedBox( width: 18.0, child: new Container( child: new Text("$_favoriteCount"), ), ) ], ); } } 注意：为什么上面的Text要用SizedBox包裹起来呢？如果不写width可以吗？（主要是为了解决跳动的问题）
最后，拿这个widget去替换原来代码的相应位置的内容。
上面说到的对state的管理是交给了FavoriteWidget，即当前Widget去管理，而实际情况中，对state的管理可以有很多种办法，接下来会慢慢学习！
状态管理
最通用的有三种方式：
1、Widget自己管理State
2、父类管理State
3、混合管理
那么如何确定使用哪种管理方式呢，这里有两个建议：
1、如果是和用户数据相关的，建议用父类来管理
2、如果是为了审美，比如动画，建议Widget自己管理
1、自己管理State
这种方式比较直接，也比较好理解，因为都是在自己的环境下处理，所以直接贴出代码：
class _TapboxA extends StatefulWidget { @override State<StatefulWidget> createState() => new _TapboxAState(); } class _TapboxAState extends State<_TapboxA> { var _active = false; _handleTap() { setState(() { _active = !_active; }); } @override Widget build(BuildContext context) { // TODO: implement build return new GestureDetector( onTap: _handleTap, child: new Container( width: 200.0, height: 200.0, color: _active ? Colors.lightGreen[700] : Colors.grey[600], // decoration: new BoxDecoration( // color: _active ? Colors.lightGreen[700] : Colors.grey[600] // ), child: new Center( child: new Text( _active ? 'Active' : 'Inactive', style: new TextStyle(fontSize: 32.0, color: Colors.white), ), ), ), ); } } 2、父控件控制State
该控制的核心在于：回调。父控件通过传递参数控制子控件的展示，子控件通过函数的回调，改变父控件的值，然后父控件调用setState（）方法再反馈到具体的子控件的展示上。
具体的代码如下：
class _TapBoxB extends StatelessWidget { // 此时子控件是Stateless的 // var active = false; final active; final ValueChanged<bool> onChanged; _TapBoxB({Key key, this.active: false, @required this.onChanged}) : super(key: key); void _handleTap() { onChanged(!active); } @override Widget build(BuildContext context) { // TODO: implement build return new GestureDetector( onTap: _handleTap, child: new Container( child: new Center( child: new Text( active ? 'Active' : 'Inactive', style: new TextStyle(fontSize: 32.0, color: Colors.white), ), ), width: 200.0, height: 200.0, decoration: new BoxDecoration( color: active ? Colors.lightGreen[700] : Colors.grey[600]), ), ); } } class ParentWidget extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return new _ParentWidgetState(); } } class _ParentWidgetState extends State<ParentWidget> { var _active = false; _handleTapboxChanged(bool newValue) { setState(() { _active = newValue; }); } @override Widget build(BuildContext context) { // TODO: implement build return new Container( child: new _TapBoxB( active: _active, // 传值 onChanged: _handleTapboxChanged, // 回调，用于触发回调 ), ); } } 3、混合管理
通俗讲，就是上面两种的柔和，父控件控制一些自己需要的State，子控件控制一些自己的State。
代码如下：
class _ParentWidget extends StatefulWidget { bool active = false; @override State<StatefulWidget> createState() => new _ParentWidgetState(); } class _ParentWidgetState extends State<_ParentWidget> { void _handleTapboxChanged(bool newValue) { setState(() { widget.active = newValue; }); } @override Widget build(BuildContext context) { // TODO: implement build return new Container( child: new TapboxC(onChanged: _handleTapboxChanged, active: widget.active), ); } } class TapboxC extends StatefulWidget { final bool _active; bool _highlight = false; final ValueChanged<bool> onChanged; TapboxC({Key key, bool active, @required this.onChanged}) :this._active = active, super(key: key) { } @override State<StatefulWidget> createState() => new _TapboxCState(); } class _TapboxCState extends State<TapboxC> { void _handleTap() { widget.onChanged(!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) { // 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, ), ), ); } } 这里与官方的代码相比，我把所有的和state相关的都放到了Widget类里。(但是，其实这么写是有问题的，可以自己想想，将在下一节分析)
至此，Flutter里的State的管理和事件交互也做了简单的了解了，对于我来说，还是不甚了解。重要的还在于多看多写。