Flutter _ 状态管理特别篇，你连原理都还没弄明白

最新推荐文章于 2024-07-22 19:36:50 发布

阿里—蚂蚁开发

最新推荐文章于 2024-07-22 19:36:50 发布

阅读量134

点赞数

分类专栏： Android 文章标签： flutter 移动开发

本文链接：https://blog.csdn.net/m0_61408386/article/details/120087527

版权

Android 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

本文详细介绍了Flutter状态管理库Provide的使用，包括添加依赖、创建Model、状态放入顶层、获取状态等步骤。通过示例展示了如何在多个页面间同步状态，并提到了Provide.stream的使用及存在的问题。文章还探讨了如何组织多个状态和处理数据流，以及遇到的监听异常问题。

摘要由CSDN通过智能技术生成

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

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

Lets do it！

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkebRyEd-1630663448699)(https://user-gold-cdn.xitu.io/2019/2/20/1690aee3246a13ec?imageslim)]

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

该项目完整代码已放在 Github

第一步：添加依赖

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LAW7kG9-1630663448702)(https://user-gold-cdn.xitu.io/2019/2/20/1690b552df50d005?imageView2/0/w/1280/h/960/ignore-error/1)]

实际添加请参考：pub.dartlang.org/packages/pr…
由于版本冲突添加失败请参考: juejin.im/post/684490…

第二步：创建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.value将counter包装成了_ValueProvider。并在它的内部提供了StreamController从而实现对数据进行流式操作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwb6RihA-1630663448703)(https://user-gold-cdn.xitu.io/2019/2/20/1690b6eb597a11ab?imageView2/0/w/1280/h/960/ignore-error/1)]

第四步：获取状态

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

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

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

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

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

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

第二种获取方式：Provide.value(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(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：
github.com/google/flut…

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

根据多个状态重建小部件

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

已知的坑

Provide.stream 诡异的手动监听

由于 Provide 自动将 Listenable 数据包装并提供了 Provide.stream 接口，让我们可以通过监听这个流，来获取最新事件。但是当我们进行手动监听之后将会发生这件诡异的事情。

···
class _SecondScreenState extends State<SecondScreen> {
  StreamSubscription<Switcher> _subscription;
### 总结

最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的14套腾讯、字节跳动、阿里、百度等2021面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。

**[CodeChina开源项目地址：https://codechina.csdn.net/m0_60958482/android_p7](https://codechina.csdn.net/m0_60958482/android_p7)**

![2020面试真题解析](https://img-blog.csdnimg.cn/img_convert/c250c081a32e6acd8478905a14e6f984.png)
![腾讯面试真题解析](https://img-blog.csdnimg.cn/img_convert/56d2a2ecba8a47ed8c0756f946a5a75f.png)

![阿里巴巴面试真题解析](https://img-blog.csdnimg.cn/img_convert/246c8bff0672095dae76548fec0c5d6f.png)

![字节跳动面试真题解析](https://img-blog.csdnimg.cn/img_convert/53e5214f2728136d80d1ef9dfbceac09.png)
网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

![](https://img-blog.csdnimg.cn/img_convert/c2c06b745494d9fab7e1b05410054302.png)

VPuUb36Y-1630663448707)]

[外链图片转存中...(img-EojSwfDf-1630663448708)]
网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

[外链图片转存中...(img-KmRCdECB-1630663448708)]

阿里—蚂蚁开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flutter _ 状态管理特别篇，你连原理都还没弄明白

和Scoped_model一样，Provide也是借助了InheritWidget，将共享状态放到顶层MaterialApp之上。底层部件通过Provier获取该状态，并通过混合ChangeNotifier通知依赖于该状态的组件刷新。Provide还提供了Provide.stream，让我们能够以处理流的方式处理数据，不过目前还有一些问题，不推荐使用。Lets do it！我们这里还是以一个简单app为例，详细介绍Provide的用法。其中涉及共享状态以及多个状态之间如何管理。[外链图片转存失败,源
复制链接

扫一扫