用了就会爱上--跨组件状态共享(Provider)

众所周知Flutter Widget 分为有状态的StatefulWidget 和无状态的 StatelessWidgetStatefulWidget里我们通过setState方法来改变数据刷新页面,如下

int _index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('provider demo'),),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(_index.toString()),
          SizedBox(height: 10,width: double.infinity,),
          RaisedButton(onPressed: (){
            setState(() {
              _index++;
            });
          }, child: Text('加1'),)
        ],
      ),
    );
  }

每次点击按钮都会setState()来重新build页面,当数据简单的时候这种方法还是可行的,一旦数据复杂庞大起来的时候,代码中将充满了setState方法,这不是我们想见到的,能不能有办法,数据一改变就自动刷新页面呢?Flutter为我们提供了组件状态管理的Provider。官方文档点此查阅https://pub.dev/packages/provider
使用起来也是相当方便呢
1.在pubspec.yaml导入provider的包

provider: ^4.0.4

2.创建数据类,该类需继承ChangeNotifier

class ProviderDemoNotifier extends ChangeNotifier {
  int _index = 1;
  int get index => _index;
  set index(int value) {
    _index = value;
    notifyListeners();  //调用此方法可刷新页面,相当于调用了setstate
  }

}

3.重写刚才的界面

@override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (_) => ProviderDemoNotifier(),
        child: Scaffold(
          appBar: AppBar(
            title: Text('provider demo'),
          ),
          body: Consumer(builder: (BuildContext context, ProviderDemoNotifier notifier, Widget child) =>
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(notifier.index.toString()),
                  SizedBox(height: 10,width: double.infinity,),
                  RaisedButton(onPressed: (){
                    notifier.index++;
                  }, child: Text('加1'),)
                ],
              ),
          )
        ));
  }

每次更新index的值都会重新刷新页面,其实就是通过ChangeNotifier 中的 notifyListeners() 方法刷新页面。

你可能感兴趣的:(用了就会爱上--跨组件状态共享(Provider))