Flutter状态管理之混合管理

最新推荐文章于 2025-06-19 08:30:00 发布

原创最新推荐文章于 2025-06-19 08:30:00 发布 · 905 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 自学杂记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用混合模式状态管理的小部件实现案例。该小部件在点击时改变颜色和边框高亮状态，其中颜色变化由父组件管理，边框高亮则由自身组件管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

/*
下面是第三个盒子，通过混合控制实现状态管理
 */
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,
    );
  }
}

最后实现效果点击后是这样：