Flutter状态管理之混合管理

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

摘要生成于 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,
    );
  }
}

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值