flutter Provider状态管理

Posted 2022-01-11 InutsukaKiba

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文章的帮助