引言
一个概念,我们在前面介绍过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