飞道的博客

Flutter 状态管理框架 | 本地与全局状态管理方案

294人阅读  评论(0)

引言

一个概念,我们在前面介绍过Flutter是声明式编程的,也区分声明式编程和命令式编程的区别。
这里,我们就来系统的学习一下Flutter声明式编程中非常重要的状态管理

ps:先说一个概念,Model,模型,这里面定义了我们准备全局使用的数据,或者方法;

举个栗子:我们有一个User类,用来储存用户的信息,比如登录之后,我们会拿到用户的一些个人数据,那么这些数据就可以作为属性写在Model里,同时我们在User内部,还会提供一个upUser方法,用来更新用户信息,那么这个方法也可以写在Model中

下面开始正题

状态管理

App 在运行中总是会更新用户界面,因此我们需要对状态进行有效的管理。状态管理本质上就是 如何解决状态读/写的问题。对此,我们将从两个方面去评估状态管理方案:

  • 状态访问
  • 状态更新

此外,根据 Flutter 原生支持的情况,我们将 Flutter 状态管理方案分为两类:

  • Flutter 内置的状态管理方案
  • 基于 Pub 的状态管理方案

本地与全局状态

众所周知,我们可以将 Flutter 小部件组合成一个小部件树,代表我们应用程序的 UI:

Flutter Counter 应用程序示例的小部件树

有时,您的状态可以独立于单个小部件中。这种状态被称为本地或临时状态,Flutter 提供了一些内置工具,例如setState和StatefulWidget来处理这个问题。

如果你有一些简单的状态只影响一个Widget的行为,StatefulWidget是你所需要的。

另一方面,当需要在多个小部件甚至整个应用程序之间共享状态时,您正在处理共享/全局应用程序状态。

跨多个小部件共享状态是事情变得有趣的地方,有许多不同的技术可以做到这一点。那么让我们回顾一下 Flutter 提供的开箱即用的功能:

InheritedWidget

您可以使用 Flutter 的内置功能在InheritedWidget多个小部件之间共享状态,

InheritedWidget就是通过范围访问使一些数据或状态可用于多个小部件。例如,在您的小部件中,您可以调用Navigator.of(context)以访问主要部件Navigator,InheritedWidget在幕后使用:

通过 InheritedWidget 进行范围访问

ValueNotifier 和 ChangeNotifier

Flutter 包含一个ValueNotifier类作为在小部件之外存储状态的一种方式。您可以将它与ValueListenableBuilder小部件一起使用以在状态更改时更新 UI。最好在这里解释一下:

这是一个示例,展示了如何使用ValueNotifier和ValueListenableBuilder一起使用:

final valueNotifier = ValueNotifier<int>(42);

ValueListenableBuilder<int>(
  valueListenable = valueNotifier,
  // 当值改变时调用 
  builder: (context, value, _) {
   
    return Text('Value is $value')
  }
);

Flutter 还自带ChangeNotifier,它是ValueNotifier

FutureBuilder & StreamBuilder

许多异步 API 使用Futures和Streams在新数据可用时通知您的应用程序。

它们的区别在于Future生成单个异步值,而Stream可以随着时间的推移生成许多异步值。

Futures 和 Streams 都是 Dart SDK 的一部分。

您可以使用 Flutter 的FutureBuilder小部件根据 Future 的状态(loading、data或error)决定要显示的小部件

类似地,StreamBuilder当流发出新数据时,使用 Flutter 的小部件来重建您的 UI:

从基于 Stream 的 API加载异步数据时,最好检查以下 UI 状态:data、no data、error、loading。

StreamBuilder支持这一点,但检查构建器中的数据或错误非常笨拙snapshot:

final stream = Stream.fromIterable([21, 42]);

StreamBuilder<int>(
  stream: stream,
  builder: (context, snapshot) {
   
    if (snapshot.connectionState == ConnectionState.active) {
   
      if (snapshot.hasData) {
   
        return MyWidget(snapshot.data); // data
      } else if (snapshot.hasError) {
   
        return MyErrorWidget(snapshot.error); // error
      } else {
   
        return Text('No data'); // no data
      }
    } else {
   
      return CircularProgressIndicator(); // loading
    }
  }
)

 

3方软件包,例如flutter_bloc、Provider和Riverpod提供StreamBuilder了更易于使用的替代方案。

使用 Flutter 的内置小部件

你可以去比较远的与内置StatelessWidget,StatefulWidget以及InheritedWidget类。您可以使用ChangeNotifier或ValueNotifier管理您的状态,或FutureBuilder与StreamBuilder从异步API的读取数据时。

结语

欢迎大家入圈一起来实战 Flutter 开源; 更多《Flutter 学习、面试;文档、视频资源》可点击此处查看获取方式,或者私信发送 “Flutter” 即可 免费获取

好了,以上便是今天的分享,希望为各位朋友后续的学习提供方便。觉得内容不错,也欢迎多多分享给身边的朋友哈


转载:https://blog.csdn.net/m0_70748845/article/details/127708802
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场