Provide 状态管理器的使用

232 阅读1分钟
import 'package:provide/provide.dart';  // 第三方包,使用时在pub.dev中获取最新版本
// 定一个Counter的Provide类,可以单独写在一个文件中
// 里面写一些数据相关的代码
class Counter with ChangeNotifier {
  int _value;
  int get value => _value;
  Counter(this._value);
  void increment() {
    _value++;
    notifyListeners();  // 同步监听
  }
}
...
@override
Widget build(BuildContext context) {
    // 初始化 CounterProvide
    final currentCounter = Provide.value<Counter>(context);
    return Column(children: [
        // 每次计数器更改时,都会重建这个小部件,大多数都使用这个,如果需要数据立即展现出来,这将是必须的
        Provide<Counter>(builder: (context, child, counter) => Text('${counter.value}'),),
        // 此小部件将计数器作为更改流。对流进行过滤,以便仅在偶数上重建。
        StreamBuilder<Counter>(
            initialData: currentCounter,
            stream: Provide.stream<Counter>(context).where((counter) => counter.value % 2 == 0),
                    builder: (context, snapshot){
                        return Text('最后的值: ${snapshot.data.value}'));
                    }
        // 点击增加
        FlatButton(child: Text('增加'), onPressed: currentCounter.increment),
        Text('另一个不依赖于Counter的小部件'),
    ]);
}
...
// main函数,可以写在单独文件
void main() {
    var counter1 = Counter(0);
    var counter2 = Counter2(0);
    var providers = Providers();
    // providers..provide(Provider.function((context) => Counter(0)));   // 第一种写法,官方写法
    providers..provide(Provider<Counter>.value(counter1))  // 第二种写法
             ..provide(Provider<Counter>.value(counter2));  // 后面如果使用到了其他类的状态管理,在后面追加即可
    runApp(ProviderNode(  // 在CounterApp上面套一层ProviderNode函数
      providers: providers,
      child: CounterApp(),
    ));
}