Flutter源码系列之《二》浅谈Flutter的状态管理库Provider

最新推荐文章于 2024-09-17 23:53:54 发布

快乐de灰太狼

最新推荐文章于 2024-09-17 23:53:54 发布

阅读量1.3k

点赞数 1

分类专栏： Flutter 源码系列文章标签： flutter provider 状态管理源码

本文链接：https://blog.csdn.net/llew2011/article/details/105450640

版权

本文介绍了Flutter状态管理库Provider的安装、使用和原理。通过一个实例展示了如何在多个页面间共享和更新用户信息，解释了Provider如何利用InheritedWidget实现状态跨组件共享，并通过监听器触发页面更新。

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

转载请注明出处：https://blog.csdn.net/llew2011/article/details/105450640

Flutter开发过程中一个常见的问题就是状态管理，所谓状态管理就是管理Flutter的Widget状态，对于Flutter的状态管理，社区上已有多种成熟的方案：Provider、Redux、MobX、BLoC等。在这些方案里Google建议我们使用Provider，接下来我们就学习下Provider，看它是如何做到的状态管理，在了解其原理之前，我们先看下它的使用。

Provider的安装

首先创建Flutter项目providerDemo，创建完毕后在根目录下找到pubspec.yaml文件，在dependencies下追加provider依赖，如下所示：

name: flutter_provider
description: A new Flutter application.

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  provider: 3.2.0					// 添加privider的依赖，注意格式

dev_dependencies:
  flutter_test:
    sdk: flutter

pubspec.yaml是flutter的配置文件，它与Android项目中的build.gradle功能类似，添加完依赖后状态栏会弹出4个能选项：Package get , Package upgrade, Flutter upgrade以及Flutter doctor，直接点击Packages get就会自动加载依赖，截图如下：

Provider的使用

假设我们有三个页面，他们分别是A页面B页面和C页面，其中A页面是主页面(Flutter项目启动后最先展示的页面)，它展示了一个用户的姓名和年龄，然后从A页面跳转到B页面，在B页面可以修改用户的姓名，之后又从B页面跳转到C页面并在C页面又修改了用户的年龄，修改完成之后直接返回到A页面，返回到A页面后应该展示的是修改后的值。这个小功能在Android中能很容易实现，接下来我们看看在Flutter中该如何做。

创建UserModel

A页面展示的是用户姓名和年龄，我们可以定义一个UserModel(有用户名和年龄属性)，然后在B页面和C页面分别修改UserModel的姓名和年龄(提供修改姓名和年龄的方法)，修改后可以触发页面更新从而使A页面展示更新后的值。UserModel定义如下：

class UserModel with ChangeNotifier {

  String _name;
  int _age;

  UserModel(this._name, this._age);

  void updateName(String name) {
    this._name = name;
    notifyListeners();
  }

  void updateAge(int age) {
    this._age = age;
    notifyListeners();
  }

  get name => _name;

  get age => _age;
}

UserModel定义了_name 和 _age私有属性并对外提供了updateName()和updateAge()方法，在这些updateXXX()方法内调用了notifyListeners()方法，notifyListeners()方法是ChangeNotifier类中提供的，ChangeNotifier是Flutter提供的具有观察者功能的类，UserModel使用with关键字表示它具有ChangeNotifier的所有功能，我们稍微看下ChangeNotifier的源码，如下所示：

class ChangeNotifier implements Listenable {
  // 监听器容器
  ObserverList<VoidCallback> _listeners = ObserverList<VoidCallback>();

  @override
  void addListener(VoidCallback listener) {
    // 添加监听器
  }

  @override
  void removeL