美文网首页Android开发Android开发Android技术知识
Flutter | 状态管理特别篇——Provide

Flutter | 状态管理特别篇——Provide

作者: Android高级架构探索 | 来源:发表于2019-02-26 17:47 被阅读12次

    前言

    今天偶然发现在谷歌爸爸的仓库下出现了一个叫做flutter-provide的状态管理框架,2月8日才第一次提交,非常新鲜。在简单上手之后感觉就是一个字——爽!所以今天就跟大家分享一下这个新的状态管理框架。

    Provider被设计为ScopedModel的替代品,并且允许我们更加灵活地处理数据类型和数据。但是首先呢还是先说说老生常谈的状态管理。

    为什么需要状态管理

    在我们一开始构建应用的时候,也许很简单。我们有一些状态,直接把他们映射成视图就可以了。这种简单应用可能并不需要状态管理。

    但是随着功能的增加,你的应用程序将会有几十个甚至上百个状态。这个时候你的应用应该会是这样。

    Wow,这是什么鬼。我们很难再清楚的测试维护我们的状态,因为它看上去实在是太复杂了!而且还会有多个页面共享同一个状态,例如当你进入一个文章点赞,退出到外部缩略展示的时候,外部也需要显示点赞数,这时候就需要同步这两个状态。

    这时候,我们便迫切的需要一个架构来帮助我们理清这些关系,状态管理框架应运而生。

    什么是Provide

    和Scoped_model一样,Provide也是借助了InheritWidget,将共享状态放到顶层MaterialApp之上。底层部件通过Provier获取该状态,并通过混合ChangeNotifier通知依赖于该状态的组件刷新。

    Provide还提供了Provide.stream,让我们能够以处理流的方式处理数据,不过目前还有一些问题,不推荐使用。

    Lets do it!

    我们这里还是以一个简单app为例,详细介绍Provide的用法。其中涉及共享状态以及多个状态之间如何管理。

    image

    这两个页面都同时依赖于counter 和 switcher两个不同的状态。并且一个页面改变状态之后另外一个页面状态也随之改变。

    该项目完整代码已放在 Github

    第一步:添加依赖

    在pubspec.yaml中添加Provide的依赖。


    第二步:创建Model

    这里实际上它承担了State的职责,但是为了和官方的State区分所以叫做model。

    import 'package:flutter/material.dart';
    
    class Counter with ChangeNotifier{
      int value = 0;
    
      increment(){
        value++;
        notifyListeners();
      }
    }
    
    

    这里我们可以看到,数据和操作数据的方法都在model中,我们可以很清晰的把业务分离出来。

    对比Scoped_model可以发现,Provide模式中model不再需要继承Model类,只需要实现Listenable,我们这里混入ChangeNotifier,可以不用管理听众。

    通过 notifyListeners 我们可以通知听众刷新。

    第三步:将状态放入顶层

    void main() {
      var counter = Counter();
      var providers = Providers();
    
    //将counter对象添加进providers
      providers.provide(Provider<Counter>.value(counter));
    
      runApp(
        ProviderNode(
            child: MyApp(), 
            providers: providers),
        );
    }
    
    

    ProviderNode封装了InheritWidget,并且提供了 一个providers容器用于放置状态。

    ProviderScope 为Provider提供单独的类型空间,它允许多个相同类型的提供者。默认使用ProviderScope('_default'),存放的时候你可以通过ProviderScope("name")来指定key。

    添加一组Provider的时候建议使用provideFrom或者provide方法,而不是provideAll,因为它可以检查编译时的类型错误。

    Provider<Counter>.value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

    第四步:获取状态

    同样的Provide也提供了两种获取State的方法。我们先来介绍第一种,通过Provide<T>小部件获取。

    Provide<Counter>(
                  builder: (context, child, counter) {
                    return Text(
                      '${counter.value}',
                      style: Theme.of(context).textTheme.display1,
                    );
                  },
                ),
    
    

    每次通知数据刷新时,builder将会重新构建这个小部件。

    builder方法接收三个参数,这里主要介绍第二个和第三个。

    • 第二个参数child:假如这个小部件足够复杂,内部有一些小部件是不会改变的,那么我们可以将这部分小部件写在Provide的child属性中,让builder不再重复创建这些小部件,以提升性能。
    • 第三个参数counter:这个参数代表了我们获取的顶层providers中的状态<T>。

    scope:通过指定ProviderScope获取该键所对应的状态。在需要使用多个相同类型状态的时候使用。

    第二种获取方式:Provide.value<T>(context)

    final currentCounter = Provide.value<Counter>(context);
    
    

    这种方式实际上调用了context.inheritFromWidgetOfExactType找到顶层的_InheritedProviders来获取到顶层providers中的状态。

    如何组织多个状态

    和scoped_model不同的是,provide模式中你可以轻松组织多个状态。只需要将状态provide进provider中就可以了。

    void main() {
      var counter = Counter();
      var switcher = Switcher();
    
      var providers = Providers();
    
      providers
        ..provide(Provider<Counter>.value(counter))
        ..provide(Provider<Switcher>.value(switcher));
    
      runApp(
        ProviderNode(
            child: MyApp(), 
            providers: providers)
        );
    }
    
    

    获取数据流

    在将counter添加进providers的过程中进行了一次包装。我们刚才通过分析源码知道了这个操作能够让我们处理流式数据。

    通过 Provide.stream<T>(context) 就能获取数据流。需要注意的是,这里每次获取的数据流都

    StreamBuilder<Counter>(
              initialData: currentCounter,
              stream: Provide.stream<Counter>(context)
                  .where((counter) => counter.value % 2 == 0),
              builder: (context, snapshot) =>
                  Text('Last even value: ${snapshot.data.value}')),
    
    

    不过在我的使用当中出现了streamTransformer失效的情况。在firstScreen和secondScreen同样应用这一段相同的代码,second screen的where方法能够生效,过滤掉奇数数据,而first screen中则是收到了完整的数据。

    需要注意的是,这里每次获取的数据流都会重新创建一条新的流。

      /// Creates a provider that listens to a stream and caches the last
      /// received value of the stream.
      /// This provider notifies for rebuild after every release.
      factory Provider.stream(Stream<T> stream, {T initialValue}) =>
          _StreamProvider<T>(stream, initialValue: initialValue);
    
    

    关于这个做法还有一些争议,具体可以查看这个issue:
    https://github.com/google/flutter-provide/issues/3

    不过这个功能还可以结合rxdart使用,可以通过stream轻松构建Observer,让我们更加灵活的组织数据。

    根据多个状态重建小部件

    当我们一个视图可能依赖于多个状态进行重建的时候,可以使用ProvideMulti小部件。

    写在最后

    最后我再谈谈Provide。Provide整体上给我的体验非常接近Scoped,简单易上手,并且更加强大。model不用再继承,只用实现Listenable让它不再具有侵入性。于此同时又增加了stream的特性,和bloc的做法又有几分相似。如果你使用过Scoped_model你会很快就上手。

    不过可以说的是,Provide是一个非常优秀的状态管理方式,值得你去使用。但是目前该package还存在一些问题,例如Provide.stream,在未来可能会进行较大的变动,需要慎重使用。

    本次代码需要的话可以简信联系我呢~

    最后给大家分享一份非常系统和全面的Android进阶技术大纲及进阶资料,及面试题集

    想学习更多Android知识,请加入Android技术开发交流 7520 16839

    进群与大牛们一起讨论,还可获取Android高级架构资料、源码、笔记、视频

    包括 高级UI、Gradle、RxJava、小程序、Hybrid、移动架构、React Native、性能优化等全面的Android高级实践技术讲解性能优化架构思维导图,和BATJ面试题及答案!

    群里免费分享给有需要的朋友,希望能够帮助一些在这个行业发展迷茫的,或者想系统深入提升以及困于瓶颈的朋友,在网上博客论坛等地方少花些时间找资料,把有限的时间,真正花在学习上,所以我在这免费分享一些架构资料及给大家。希望在这些资料中都有你需要的内容。

    Android高级技术大纲,以及系统进阶视频,及面试题和答案


    面试题及答案
    Android高级技术大纲
    Android 进阶视频资料

    相关文章

      网友评论

        本文标题:Flutter | 状态管理特别篇——Provide

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