flutter Provider状态管理

flutter provider跨组件状态共享的简单使用

provider是对InheritedWidget进行封装的,官方介绍有简化资源分配,懒加载,创建新类时减少大量的模板代码,支持DevTools,提升类的可扩展性,整体监听架构时间复杂度以及指数增长,还可以调用InheritedWidget对于InheritedWidget自行搜索了解

先加依赖

provider: ^6.0.1

下面是一个可以依赖多个模型,并且可以刷新UI的列子

然后假装这你要共享的模型

class ProviderModels with ChangeNotifier {
  int name = 1;

  void changeName() {
    name++;
    notifyListeners();
  }
}

provider有八种提供者,如果是使用provider的话他的模型是不需要继承ChangeNotifier ,因为他只会修改值,并不会修改UI,
然后创建共享数据

  @override
  Widget build(BuildContext context) {
  //依赖多个模型使用MultiProvider
    return MultiProvider(
        providers: [
          //这个就是无法刷新UI的提供者providerData不需要继承ChangeNotifier 
          Provider(create: (context) => providerData()),
          //这是我们要用到的可以刷新UI的
          ChangeNotifierProvider<ProviderModels>(
              create: (_) => ProviderModels()),
        ],
        child: MaterialApp(.....));
  }

MultiProvider是依赖多个模型使用,如果只需要一个提供者(Provider或者ChangeNotifierProvider或者是其他)可以直接使用,下面用Provider举个栗子

列如:
 final name= 48;
 Provider<int>.value(
      value: name,
      child: ......,
    ),

接下来使用方式

Consumer<ProviderModels>(
        builder: (BuildContext context, value, Widget? child) {
        //value就是ProviderModels
          return Text(value.name.toString());
        },
      ),

也可以直接用

child: Text(Provider.of<ProviderModels>(context).name.toString())

Consumer是封装好的,使用起来更加方便,看看下面源码大家就明白了

  /// {@template provider.consumer.constructor}
  /// Consumes a [Provider<T>]
  /// {@endtemplate}
  Consumer({
    Key? key,
    required this.builder,
    Widget? child,
  }) : super(key: key, child: child);

  /// {@template provider.consumer.builder}
  /// Build a widget tree based on the value from a [Provider<T>].
  ///
  /// Must not be `null`.
  /// {@endtemplate}
  final Widget Function(
    BuildContext context,
    T value,
    Widget? child,
  ) builder;

  @override
  Widget buildWithChild(BuildContext context, Widget? child) {
    return builder(
      context,
      Provider.of<T>(context),
      child,
    );
  }

最后就是修改数据的时候

 final models = Provider.of<ProviderModels>(context);
 .....
  onTap: (index) {
            models.changeName();
           },

了解到他的原因是我在项目中使用EventBus的,但是EventBus是通过观察者模式来实现跨组件状态共享的,订阅者必须需显式注册状态改变回调,也得在组件销毁的时候手动去解绑啥的,还需要定义很多事件,就很麻烦,provider的话他可以使UI和咱们的页面逻辑分离,个人感觉比EventBus更好用
最后谢谢jimi文章的帮助

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>