美文网首页
状态管理

状态管理

作者: 梦幽辰 | 来源:发表于2020-01-31 20:05 被阅读0次

InheritedWidget

// 爷爷组件
class StateManagementDemo extends StatefulWidget {
  @override
  _StateManagementDemoState createState() => _StateManagementDemoState();
}

class _StateManagementDemoState extends State<StateManagementDemo> {
  int _count = 0;

  void _transform() {
    setState(() {
      _count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      count: _count,
      transform: _transform,
      child: Scaffold(
          appBar: AppBar(
            title: Text('StateManagementDemo'),
            elevation: 0,
          ),
          body: CounterWrapper()),
    );
  }
}
// 父亲组件
class CounterWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Counter();
  }
}
// 孙组件
class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final int count = CounterProvider.of(context).count;
    final VoidCallback transform = CounterProvider.of(context).transform;
    return Center(
      child: ActionChip(label: Text('$count'), onPressed: transform),
    );
  }
}
// 状态管理组件
class CounterProvider extends InheritedWidget {
  final int count;
  final VoidCallback transform;
  final Widget child;

  CounterProvider({this.count, this.transform, this.child}) : super(child: child);

  static CounterProvider of(BuildContext context) => context.inheritFromWidgetOfExactType(CounterProvider);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}

ScopedModel(第三方库)

// 爷爷组件
class StateManagementDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel(
      model: CounterModel(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('StateManagementDemo'),
          elevation: 0,
        ),
        body: CounterWrapper(),
        floatingActionButton: ScopedModelDescendant<CounterModel>(
          rebuildOnChange: false,
          builder: (context, _, model) => FloatingActionButton(
            child: Icon(Icons.add), 
            onPressed: model.transform
          ),
        ),
      ),
    );
  }
}
// 父亲组件
class CounterWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Counter();
  }
}
// 孙组件
class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<CounterModel>(
      builder: (context, _, model)=>ActionChip(
        label: Text('${model.count}'),
        onPressed: model.transform,
      ),
    );
  }
}
// 状态管理组件
class CounterModel extends Model {
  int _count = 0;
  int get count => _count;

  void transform() {
    _count += 1;
    notifyListeners();
  }
}

相关文章

  • 学习笔记(十八)Vuex状态管理

    Vuex状态管理 组件状态管理及组件间通信回顾 状态管理 状态集中管理和分发,解决多个组件共享状态的问题 状态自管...

  • 轻松flutter之 组件状态管理

    管理状态的最常见的方法: 方法描述自身状态管理Widget管理自己的状态。父组件管理子组件状态父Widget管理子...

  • Flutter优质文章

    状态管理系列 Flutter | 状态管理探索篇——Scoped Model(一) Flutter | 状态管理探...

  • 状态管理

    1、状态管理(1)HTTP协议中每次连接处理一个请求,当连接断开时,服务器不会记住用户曾经访问过,该特点叫做无 ...

  • 状态管理

    响应式的编程框架中都会有一个永恒的主题——“状态管理”,无论是在React/Vue(两者都是支持响应式编程的web...

  • 状态管理

    小时候我也是一个蛮努力的人,别人学习的时候 我在学习,别人玩的时候我也在学习,但是学习成绩一直都排着末尾,明...

  • 状态管理

    1.局部状态管理 局部状态管理实际上是替代了setState带来的没必要的渲染 1.状态管理 按照个人的理解来看,...

  • 状态管理

    对于状态管理,有现成的vuex和redux等框架,能方便我们的开发,但在使用这些框架的时候,还是有必要先了解下什么...

  • 状态管理

    今天来简单的谈一下什么是状态管理。 首先看一下这两个图 1. 服务端渲染的WEB开发 2.前后端分离的单页应用(S...

  • 状态管理

    InheritedWidget ScopedModel(第三方库)

网友评论

      本文标题:状态管理

      本文链接:https://www.haomeiwen.com/subject/vyqnthtx.html