之前一篇文章寫的是自管理和父管理的方式實(shí)現(xiàn)沾瓦，官方教程里還有一個(gè)混合管理的讼载，我在學(xué)習(xí)了自管理和父管理模式后自己先擼了一段混合管理模式的實(shí)現(xiàn)代碼，然后去對(duì)比官方教程鞏固學(xué)習(xí)。

項(xiàng)目說明：同樣還是一個(gè)盒子陨溅，點(diǎn)擊的時(shí)候會(huì)切換盒子顏色狀態(tài)针余，同時(shí)盒子邊框會(huì)有紅色高亮切換。在這個(gè)項(xiàng)目里谬以，邊框的紅色高亮變換是通過自身控件來管理狀態(tài)强饮，而盒子的綠色變化是通過父控件來管理實(shí)現(xiàn)。

下面擼碼：

/*
下面是第三個(gè)盒子为黎，通過混合控制實(shí)現(xiàn)狀態(tài)管理
 */
class TapBoxC extends StatefulWidget {
  //TapBoxC控件需要管理盒子邊框紅色高亮的變化胡陪，是屬于自己管理狀態(tài)，所以要繼承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,
    );
  }
}

運(yùn)行點(diǎn)擊效果如下：

Screenshot_20180913-142321.png