Flutter功能型组件之跨组件状态共享

最新推荐文章于 2024-04-26 15:08:46 发布
最新推荐文章于 2024-04-26 15:08:46 发布
阅读量879 收藏 1
点赞数 1
分类专栏： flutter 文章标签： flutter
原文链接：https://www.cnblogs.com/parzulpan/p/12202577.html
版权

前言

  在Flutter开发中，状态管理是一个永恒的话题。
  一般的原则是：如果状态是组件私有的，则应该由组件自己管理；如果状态要跨组件共享，则该状态应该由各个组件共同的父元素来管理。
  对于组件私有的状态管理很好理解，但对于跨组件共享的状态，管理的方式就比较多了，如使用全局事件总线EventBus，它是一个观察者模式的实现，通过它就可以实现跨组件状态同步：状态持有方（发布者）负责更新、发布状态，状态使用方（观察者）监听状态改变事件来执行一些操作。
  但是观察者模式来实现跨组件状态共享有一些明显的缺点：

  1. 必须显示定义各种事件，不好管理；
  2. 订阅者必须显式注册状态改变回调，也必须在组件销毁时手动去解绑回调以避免内存泄漏；

  是否还有更好的跨组件状态管理方式了？
  我们知道，InheritedWidget能绑定与它依赖的子孙组件的依赖关系，并且当InheritedWidget数据发生变化时，可以自动更新依赖的子孙组件。基于此，可以将需要跨组件共享的状态保存在InheritedWidget中，然后在子组件中引用InheritedWidget即可。Flutter社区的Provider包就是基于这个思想实现的。

Provider

  基于上面的思想，实现一个最小功能的Provider。

定义一个保存共享数据的类

  为了通用性，使用泛型。

class InheritedProvider<T> extends InheritedWidget{
  InheritedProvider({@required this.data, Widget child}): super(child: child);

  // 共享状态使用泛型
  final T data;

  bool updateShouldNotify(InheritedProvider<T> old){
    // 返回true，则每次更新都会调用依赖其的子孙节点的didChangeDependencies
    return true;
  }
}

数据发生变化时如何重构InheritedProvider

  存在两个问题：

  1. 数据发生变化怎么通知？
  2. 谁来重新构建InheritedProvider？

  对于第一个问题，可以使用之前介绍的eventBus来进行事件通知，但是为了更贴近Flutter开发，使用Flutter中SDK中提供的ChangeNotifier类 ，它继承自Listenable，也实现了一个Flutter风格的发布者-订阅者模式，可以通过调用addListener()和removeListener()来添加、移除监听器（订阅者）；通过调用notifyListeners() 可以触发所有监听器回调。
  对于第二个问题，将要共享的状态放到一个Model类中，然后让它继承自ChangeNotifier，这样当共享的状态改变时，我们只需要调用notifyListeners() 来通知订阅者，然后由订阅者来重新构建InheritedProvider。

// 该方法用于Dart获取模板类型
Type _typeOf<T>() => T;

class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget{
  ChangeNotifierProvider({
    Key key,
    this.data,
    this.child,
  });

  final Widget child;
  final T data;

  // 定义一个便捷方法，方便子树中的widget获取共享数据
//  static T of<T>(BuildContext context){
//    final type = _typeOf<InheritedProvider<T>>();
//    final provider = context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
//    return provider.data;
//  }

  // 替换上面的便捷方法，按需求是否注册依赖关系
  static T of<T>(BuildContext context, {bool listen = true}){
    final type = _typeOf<InheritedProvider<T>>();
    final provider = listen
        ? context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>
        : context.ancestorInheritedElementForWidgetOfExactType(type)?.widget as InheritedProvider<T>;
    return provider.data;
  }

  _ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();

}


// _ChangeNotifierProviderState类的主要作用就是监听到共享状态（model）改变时重新构建Widget树。
// 注意，在_ChangeNotifierProviderState类中调用setState()方法，widget.child始终是同一个，
// 所以执行build时，InheritedProvider的child引用的始终是同一个子widget，
// 所以widget.child并不会重新build，这也就相当于对child进行了缓存！当然如果ChangeNotifierProvider父级Widget重新build时，则其传入的child便有可能会发生变化。
class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>>{
  void update(){
    // 如果数据发生变化（model类调用了notifyListeners)，重新构建InheritedProvider
    setState(() => {});
  }

  @override
  void didUpdateWidget(ChangeNotifierProvider<T> oldWidget){
    // 当Provider更新时，如果新旧数据不相等，则解绑旧数据监听，同时添加新数据监听
    if(widget.data != oldWidget.data){
      oldWidget.data.removeListener(update);
      widget.data.addListener(update);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void initState(){
    // 给model添加监听器
    widget.data.addListener(update);
    super.initState();
  }

  @override
  void dispose(){
    // 移除model的监听器
    widget.data.removeListener(update);
    super.dispose();
  }

  @override
  Widget build(BuildContext context){
    return InheritedProvider<T>(
      data: widget.data,
      child: widget.child,
    );
  }

}

  可以看到_ChangeNotifierProviderState类的主要作用就是监听到共享状态（model）改变时重新构建Widget树。注意，在_ChangeNotifierProviderState类中调用setState()方法，widget.child始终是同一个，所以执行build时，InheritedProvider的child引用的始终是同一个子widget，所以widget.child并不会重新build，这也就相当于对child进行了缓存！当然如果ChangeNotifierProvider父级Widget重新build时，则其传入的child便有可能会发生变化。

代码示例

// 跨组件状态共享(Provider)


// 一个通用的InheritedWidget，保存任需要跨组件共享的状态
import 'dart:collection';

import 'package:flutter/material.dart';

class InheritedProvider<T> extends InheritedWidget{
  InheritedProvider({@required this.data, Widget child}): super(child: child);

  // 共享状态使用泛型
  final T data;

  bool updateShouldNotify(InheritedProvider<T> old){
    // 返回true，则每次更新都会调用依赖其的子孙节点的didChangeDependencies
    return true;
  }
}


// 该方法用于Dart获取模板类型
Type _typeOf<T>() => T;

class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget{
  ChangeNotifierProvider({
    Key key,
    this.data,
    this.child,
  });

  final Widget child;
  final T data;

  // 定义一个便捷方法，方便子树中的widget获取共享数据
//  static T of<T>(BuildContext context){
//    final type = _typeOf<InheritedProvider<T>>();
//    final provider = context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>;
//    return provider.data;
//  }

  // 替换上面的便捷方法，按需求是否注册依赖关系
  static T of<T>(BuildContext context, {bool listen = true}){
    final type = _typeOf<InheritedProvider<T>>();
    final provider = listen
        ? context.inheritFromWidgetOfExactType(type) as InheritedProvider<T>
        : context.ancestorInheritedElementForWidgetOfExactType(type)?.widget as InheritedProvider<T>;
    return provider.data;
  }

  _ChangeNotifierProviderState<T> createState() => _ChangeNotifierProviderState<T>();

}


// _ChangeNotifierProviderState类的主要作用就是监听到共享状态（model）改变时重新构建Widget树。
// 注意，在_ChangeNotifierProviderState类中调用setState()方法，widget.child始终是同一个，
// 所以执行build时，InheritedProvider的child引用的始终是同一个子widget，
// 所以widget.child并不会重新build，这也就相当于对child进行了缓存！当然如果ChangeNotifierProvider父级Widget重新build时，则其传入的child便有可能会发生变化。
class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>>{
  void update(){
    // 如果数据发生变化（model类调用了notifyListeners)，重新构建InheritedProvider
    setState(() => {});
  }

  @override
  void didUpdateWidget(ChangeNotifierProvider<T> oldWidget){
    // 当Provider更新时，如果新旧数据不相等，则解绑旧数据监听，同时添加新数据监听
    if(widget.data != oldWidget.data){
      oldWidget.data.removeListener(update);
      widget.data.addListener(update);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  void initState(){
    // 给model添加监听器
    widget.data.addListener(update);
    super.initState();
  }

  @override
  void dispose(){
    // 移除model的监听器
    widget.data.removeListener(update);
    super.dispose();
  }

  @override
  Widget build(BuildContext context){
    return InheritedProvider<T>(
      data: widget.data,
      child: widget.child,
    );
  }

}


// 购物车示例：实现一个显示购物车中所有商品总价的功能

// 用于表示商品信息
class Item{
  // 商品单价
  double price;
  // 商品份数
  int count;

  Item(this.price, this.count);

}


// 保存购物车内商品数据，跨组件共享
class CartModel extends ChangeNotifier{
  // 用于保存购物车中商品列表
  final List<Item> _items = [];

  // 禁止改变购物车里的商品信息
  UnmodifiableListView<Item> get items => UnmodifiableListView(_items);

  // 购物车中商品的总价
  double get totalPrice => _items.fold(0, (value, item) => value + item.count * item.price);

  // 将[item]添加到购物车，这是唯一一种能从外部改变购物车的方法
  void add(Item item) {
    _items.add(item);
    // 通知监听者（订阅者），重新构建InheritedProvider，更新状态
    notifyListeners();
  }

}


// 优化
// 一个便捷类，封装一个Consumer的Widget
class Consumer<T> extends StatelessWidget{
  final Widget child;
  final Widget Function(BuildContext context, T value) builder;

  Consumer({
    Key key,
    @required this.builder,
    this.child,
  }): assert(builder != null),
      super(key: key);

  Widget build(BuildContext context){
    return builder(
      context,
      // 自动获取Model
      ChangeNotifierProvider.of<T>(context),
    );
  }
}


// 页面
class ProviderRoute extends StatefulWidget{
  _ProviderRouteState createState() => _ProviderRouteState();
}

class _ProviderRouteState extends State<ProviderRoute>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('跨组件状态共享(Provider)'),
      ),
      body: Center(
        child: ChangeNotifierProvider<CartModel>(
          data: CartModel(),
          child: Builder(builder: (context){
            return Column(
              children: <Widget>[
//                Builder(builder: (context){
//                  var cart = ChangeNotifierProvider.of<CartModel>(context);
//                  return Text("总价：${cart.totalPrice}");
//                },),

              // 进行优化，替换上面Builder
                Consumer<CartModel>(
                  builder: (context, cart) => Text("总价：${cart.totalPrice}"),
                ),

                Builder(builder: (context){
                  // 控制台打印出这句，说明按钮在每次点击时其自身都会重新build！
                  print("RaisedButton build");
                  return RaisedButton(
                    child: Text("添加商品"),
                    onPressed: (){
                      // 给购物车中添加商品，添加后总价会更新
//                      ChangeNotifierProvider.of<CartModel>(context).add(Item(20.0, 1));
                      // listen设为false，不建立依赖关系，因为按钮不需要每次重新build
                      ChangeNotifierProvider.of<CartModel>(context, listen: false).add(Item(20.0, 1));
                    },
                  );
                },)
              ],
            );
          },),
        ),
      ),
    );
  }
}

代码优化

  两个地方可以进行代码优化，详细看代码示例。

总结

Provider原理图


  Model变化后会自动通知ChangeNotifierProvider（订阅者），ChangeNotifierProvider内部会重新构建InheritedWidget，而依赖该InheritedWidget的子孙Widget就会更新。
  可以发现使用Provider，将会带来如下收益：

  1. 业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
  2. 数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了。这真的很棒，帮我们省掉了大量的工作！
  3. 在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。

其他状态管理包

  Provider & Scoped Model、Redux、MobX、BLoC，这里特别推荐阿里咸鱼团队推出的开源项目：fish redux。

 

一叶飘舟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
MobX 实现 Flutter 多组件的状态共享
Flutter 跨平台技术研究
03-05 405
本篇介绍了3种可用于MobX 状态共享的方法，由于 MobX 无法直接利用上级组件给下级组件共享，因此需要借助其他方式实现状态共享。
Flutter 跨组件状态共享
海阔天空
05-23 242
Flutter 跨组件状态共享
Flutter 之全局变量及共享状态
最新发布
m0_64365896的博客
04-26 979
10.1 自定义组件方法简介10.2 组合现有组件10.3 组合实例：TurnBox10.4 CustomPaint 与 Canvas10.5 自绘实例：圆形背景渐变进度条10.6 自绘组件：CustomCheckbox10.7 自绘组件: DoneWidget10.8 水印实例: 文本绘制与离屏渲染。
Flutter之跨组件状态共享（Provider）
XiNanHeiShao的专栏
11-20 2591
Flutter是Google(全球顶级互联网科技公司)出品，后台够硬，毫无疑问Flutter即将或已经成为跨平台开发的主流，Flutter野心很大，不仅冲击着原生开发，而且很有可能会烧到Web前端。作为移动端开发者的你，如果不关注Flutter的话，实在说不过去啦！ Flutter跨组件状态共享（Provider）应用 一、效果图 界面初始化状态 分别点击两个按钮，数据会相应变化 2、Flut...
Flutter跨组件传递事件
路漫漫其修远
12-12 458
步骤 1. 引入第三方库 在 pubspec.yaml 引入 event_bus: ^1.1.1 2. 定义在组件之间传递的对象 class UserInfo { String nickname; int level; UserInfo(this.nickname, this.level); }3. 创建全局的EventBus对象 final eventBus = EventBus(); 4. 在某个widget发出事件 FlatButton( child: Te.
Flutter 功能型组件
xiangxiongfly
11-21 1868
文章目录Flutter 功能型组件监听返回键菜单类型组件 Flutter 功能型组件 监听返回键 两次点击返回键才会退出程序。 class _MyHomePageState extends State<MyHomePage> { DateTime? lastTime; @override Widget build(BuildContext context) { return WillPopScope( onWillPop: ()
Flutter组件化开发方案
01-27
【Flutter组件化开发方案】 组件化开发是一种将大型应用程序拆分为独立、可重用的模块化组件的方法，有助于提升代码的可维护性、可扩展性和团队协作效率。在Flutter中，随着业务需求的增长，单纯地将Flutter作为...
Flutter学习Roadmap.pptx
06-15
- **一切皆Widget**：Flutter中的所有元素都是Widget，包括基础组件（如Button、Text）、布局组件（如Row、Column）、容器组件、可滚动组件、功能型组件和自定义组件。 - **UI预览与调试**：热加载技术允许快速预览...
36 Flutter仿京东商城项目 用户登录 退出登录 事件广播更新状态.rar
03-25
"36 Flutter仿京东商城项目 用户登录 退出登录 事件广播更新状态.rar"，我们主要探讨的是如何使用Flutter框架构建一个类似京东商城的移动应用，并且涉及到了用户登录、退出登录以及事件广播更新状态的核心功能。...
myfresh.rar
10-19
总的来说，Flutter的组件通信机制是其强大功能的一部分，通过合理使用这些机制，开发者可以构建出高度交互和动态的用户界面。在阅读和分析"myfresh.rar"中的代码时，你可以进一步了解这些概念，并将它们应用到自己的...
flutter
03-06
Redux遵循单向数据流原则，将应用状态集中管理，而Provider则是基于InheritedWidget实现的，提供了一种更加直观和简单的方式来共享和管理状态。 在性能方面，Flutter使用了自己的渲染引擎，不依赖于原生平台的组件...
Flutter Provider 共享状态管理
征战无悔人生
08-01 687
Provider是目前官方推荐的全局状态管理工具。
Flutter状态管理-多页面收藏同步
吴唐人的博客
04-09 2234
Flutter状态管理-多页面收藏同步（局部刷新）
Flutter 数据和状态共享 管理类provider使用小记（自用）EventBus使用
白骨书生的专栏
09-16 547
https://pub.dev/packages/provider/example 1、 provider: ^4.3.2+2 2、import 'package:provider/provider.dart'; /// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier]. void main() { runApp( /// Providers ar...
Flutter之跨组件共享状态Provider原理剖析
菜鸟博客
05-25 402
参考资料： Flutter之实战InheritedWidget详解 数据共享（InheritedWidget） 跨组件状态共享 状态管理介绍 Flutter 官方Provider ReadMe 在Flutter中什么是状态呢？Flutter官方给出的定义就是“当任何时候需要重建用户页面时，你所需要的数据”。状态分为短时状态（ephemeral）和应用状态（app）两种。短时状态就是不需要与其他UI共享的状态，比如当前Widget动画的进度。怎么区分短时状态和应用状态呢？官网给了一个很容易理解的图来区分短时状
flutter 跨组件通信的方式EventBus
华山论码
10-11 682
在组件之间如果有事件需要传递，一方面可以一层层来传递，另一方面我们也可以使用一个EventBus工具来完成。 其实EventBus在Vue、React中都是一种非常常见的跨组件通信的方式： EventBus相当于是一种订阅者模式，通过一个全局的对象来管理； 这个EventBus我们可以自己实现，也可以使用第三方的EventBus； 这里我们直接选择第三方的EventBus： dependencies: event_bus: ^2.0.0 第一：我们需要定义一个希望在组件之间传递的对象： 我们可以
Flutter-防京东商城项目-状态管理 多页面数据共享-23
weixin_38716347的博客
09-04 262
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 1.安装第三方 provider: ^3.0.0+1 2.把整个文件拖进去 3.在购物车引入文件 import '../../provider/Counter.dart'; 配置 初始化第三方 import 'package:flutter_app/provider/
Flutter状态管理之Provider数据共享的底层实现
datian1234的博客
07-26 260
高级的Flutter工程师往往都是从最简单的架构开始研究学习。今天给大家带来的是Flutter中比较重要的状态管理框架Provider，也是每位Flutter开发者必学的框架。Provider功能比较强大，能够轻松实现一键换肤和语言切换等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值