Flutter状态管理之混合管理

之前一篇文章写的是自管理和父管理的方式实现，官方教程里还有一个混合管理的，我在学习了自管理和父管理模式后自己先撸了一段混合管理模式的实现代码，然后去对比官方教程巩固学习。

项目说明：同样还是一个盒子，点击的时候会切换盒子颜色状态，同时盒子边框会有红色高亮切换。在这个项目里，边框的红色高亮变换是通过自身控件来管理状态，而盒子的绿色变化是通过父控件来管理实现。

下面撸码：

/*
下面是第三个盒子，通过混合控制实现状态管理
 */
class TapBoxC extends StatefulWidget {
  //TapBoxC控件需要管理盒子边框红色高亮的变化，是属于自己管理状态，所以要继承StatefulWidget
  TapBoxC({Key key, this.cActive: false, this.onChanged}) : super(key: key);
  final cActive;
  final ValueChanged<bool> onChanged;
  @override
  State<StatefulWidget> createState() {
    return new TapBoxCState();
  }
}
 
class TapBoxCState extends State<TapBoxC> {
  bool _cHighLight = false;
  void _cHighLightChanged() {
    setState(() {
      _cHighLight = !_cHighLight;
      widget.onChanged(!widget.cActive);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _cHighLightChanged,
      child: new Center(
        child: new Container(
          alignment: Alignment.center,
          width: 200.0,
          height: 200.0,
          child: new Text(
            widget.cActive ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 50.0, color: Colors.white),
          ),
          decoration: new BoxDecoration(
              color: widget.cActive ? Colors.green[400] : Colors.grey,
              border: _cHighLight
                  ? new Border.all(color: Colors.red, width: 05.0)
                  : null),
        ),
      ),
    );
  }
}
 
class ParentWidgetC extends StatefulWidget {
  //ParentWidgetC是作为父控件来管理盒子颜色的变化
  @override
  State<StatefulWidget> createState() {
    return new ParentWidgetCState();
  }
}
 
class ParentWidgetCState extends State<ParentWidgetC> {
  bool _cActive = false;
 
  void _handleBoxCStateChanged(bool value) {
    setState(() {
      _cActive = value;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return new TapBoxC(
      cActive: _cActive,
      onChanged: _handleBoxCStateChanged,
    );
  }
}

运行点击效果如下：

Screenshot_20180913-142321.png