第二百一十三回

文章目录

我们在上一章回中介绍了组件之间共享数据相关的内容,本章回中将介绍全局共享数据.闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在上一章回中介绍了使用InheritedWidget组件共享数据的方法,不过这种共享只限于父组件与子组件之间。本章回中将介绍一种全局共享数据的方式,这里说的

全局是指在任意组件之间。我们需要借助provider包实现全局数据共享功能,本章回中将详细介绍这方面的内容。此外,这种共享数据的方式也叫状态管理,因为在

Flutter中更新数据都是通过更新状态实现的,类似StatefulWidget组件中的通过setState()方法更新组件状态。

实现方法

我们首先介绍provider包,明白包中的内容后再介绍实现共享数据的方法,provider包提供了相关的类来实现数据共享功能,主要包含5个类,下面是它们的详细功能:

  • ChangeNotifier类:主要用来实现数据共享类,它的核心功能是提供notifyListeners()方法来通知其它组件更新数据;
  • ChangeNotifierProvider类:主要用来把数据共享类和监听数据变化的组件关联起来;
  • Provider类:主要用来获取共享数据,主要通过它的of()方法来获取数据共享类的实例;
  • Consumer类:主要用来获取共享数据,自带builder和child属性,通过builder属性获取数据共享类的实例;
  • Selector类:主要用来获取共享数据,自带builder,selector和child属性,通过builder属性获取数据共享类的实例;
    这些相互协作来实现数据共享功能,它的运行过程为:ChangeNotifier类提供共享数据,并且发出数据变化的通知,ChangeNotifierProvider类把数据更新的通
    知发给监听共享数据的组件,Provider,Consumer,Selector这三个类监听到数据变化的通知后从共享数据中获取数据。明白provider包的运行过程后,我们将介
    绍具体的实现方法:
  1. 在yaml文件中导入provider包,并且从网上获取包到本地项目中;
  2. 创建数据共享类,需要继承ChangeNotifier类,使用类中的notifyListeners()方法通知数据有更新;
  3. 使用ChangeNotifierProvider组件把数据共享类和监听数据变化的组件关联起来。该类有两个属性:
  • create:用来绑定ChangeNotifier类型对象,也就是数据共享类
  • child:用来指定哪些widegt可以接收到数据更新的通知;
  1. 获取更新后的数据,有三种方法:Provier,Consumer,Selector,我们在后面章回中介绍;

示例代码

dart 复制代码
///创建数据共享类,需要继承ChangeNotifier类,使用类中的notifyListeners()方法通知:数据有更新
class ViewModel extends ChangeNotifier {
  late String _data;

  ViewModel() {
    _data = 'init data';
  }


  String get getData {
    print('data is gotten at getter');
    return _data;
  }

  set setData(String value) {
    print('data is changed to \'$value\'at setter');
    _data = value;
    ///当数据更新时通知更新UI
    notifyListeners();
  }
}
  ///在整个应用的顶层设置Notifier,
  ///在整个应用的任何位置都可以使用viewModel中共享的数据
  runApp(
    ChangeNotifierProvider(
      create:(context) => ViewModel(),
      child: const FlutterCookbookApp(),
    )
  );

上面的代码中演示了数据共享类的实现和ChangeNotifierProvier类的实现,这里需要注意的是ChangeNotifierProvier类的实现,通常会把顶层的widget赋值

给该类的child属性,也就是把数据共享类和顶层的Widget绑定在一起,Flutter中的Widget是以树的形式进行管理,顶级widget相当于树根,如果把树根和数据共

享类绑定到一起,那么整棵树上任意的widget都可以获取共享数据。鉴于这个原理,我们通常把根widget和数据共享类绑定到一起,比如示例代码中就把整个项目的根

widget和数据共享类绑定到了一起,我们可以在项目中的任意Widget里获取共享数据。

经验总结

provider包的内容比较抽象不好理解,因此我们对本章回的内容总结如下,以方便大家快速入门provider包相关的知识:

  1. 创建数据共享类,并且在数据更新时通知监听器;
  2. 把数据共享类和顶层Widget通过ChangeNotificator关联起来;
  3. 在应用其它地方获取共享数据 ,获取的方式有三种:Provide, Consumer和Selector;
    下是我在项目中总结的一些经验,在此分享给大家:
    provide包背后的设计思路使用了观察者模式,我们可以把数据共享类当作被观察者,获取数据的类当作观察者,二者通过ChangeNotificator关联在了一起。这是我
    自己在使用过程中总结出的经验,使用这种类比的方式给大家介绍后是不是更加容易理解呢?
    provider包在源代码中也是使用了InheritedWidget组件来实现数据共享,只是它给开发都提供了好用的接口,让开发者以更加方便的方法实现数据共享功能。除了该
    包外还有其它的包可以实现数据共享的功能,比如rxDart,Redux,bloc,阿里的fish-redux等。大家可以到Flutter的包仓库中查看这些包的使用方法,不过我还
    是推荐provider包,毕竟这是官方文档中推荐使用的包,而且是flutter社区在维护,这给包在后续的维护和更新方面提供了保证。
    看官们,关于"全局共享数据概述"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
相关推荐
码客前端2 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛2 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
北辰当尹9 分钟前
【实习之旅】Kali虚拟机桥接模式ping通百度
java·服务器·桥接模式
Just Dreamchaser14 分钟前
Pdf和Docx文件导出生成水印工具类
java·给pdf和docx文件添加水印
工藤学编程15 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保15 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫16 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
这个需求做不了17 分钟前
Java实现文件格式转换(图片,视频,文档,音频)
java
愿你天黑有灯下雨有伞21 分钟前
高性能Java并发编程:如何优雅地使用CompletableFuture进行异步编排
java
indexsunny22 分钟前
互联网大厂Java面试实战:基于电商场景的Spring Boot与微服务技术问答
java·spring boot·微服务·面试·hibernate·电商场景·技术问答