Flutter widget 间传递数据的方案 InheritedWidget、Notification、EventBus

柔情只为你懂 2023-07-18 06:38 11阅读 0赞

### 文章目录 ###

*   *   *  InheritedWidget
         *   *  示例
             *   *  构造函数传值：
                 *  继承 InheritedWidget 传值：
         *  Notification
         *   *  示例
         *  EventBus
         *   *  示例
             *  示例完整源码

> `Flutter`是由众多`widget`构成的`UI`框架，之前的文章我们在不同的`widget`之间传递数据是通过构造函数传参的方式传递。如果嵌套的`widget`过多，这么写不免有些麻烦且层级复杂。所以`Flutter`还提供了其他方案来实现`跨 widget 间数据的传递`，下面就介绍`InheritedWidget、Notification 和 EventBus`这三种方案。

### InheritedWidget ###

> `InheritedWidget` 是`widget`的基类，可有效地向下传播信息。  
> 可以理解为`子 widget`可以在任何位置获取继承了`InheritedWidget`的`父 widget`中的数据。

#### 示例 ####

> 示例中通过`构造函数`和继承`InheritedWidget`两种方式实现`父 widget ：FrogColor`向`子 widget：FColor`传值。

##### 构造函数传值： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

##### 继承 InheritedWidget 传值： #####

1.  首先定义一个类`FrogColor`继承`InheritedWidget`，并在构造方法中传递数据和方法：`model 和 doSomeThing`

class FrogColor extends InheritedWidget {
    
      const FrogColor({
        Key key,
        @required this.model,
        @required this.doSomeThing,
        @required Widget child,
      }) : assert(model != null),
            assert(child != null),
            super(key: key, child: child);
    
      // 直接从 _FirstPageState 中的 State 获取数据，这里可指定为泛型
      final _FirstPageState model;
      // 方法
      final Function() doSomeThing;
    
      // 获取实例
      static FrogColor of(BuildContext context) {
        return context.dependOnInheritedWidgetOfExactType<FrogColor>();
      }
    
      // 判断是否需要更新
      @override
      bool updateShouldNotify(FrogColor old) => model != old.model;
    }

1.  在布局中使用`FrogColor`包裹`FColor`子`widget`，同时传递`data和 doSomeThing 方法`。由于上面定义的`data`是`_FirstPageState`所以这里直接传递`this`，`doSomeThing`方法中我们传递了`_changeColor`用于改变`mColor`的值，并且在子布局中能够刷新显示最新的`color`。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]
2.  最后我们在`FColor`中获取到`FrogColor`中的`date数据`和调用`doSomeThing 方法`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

上面的`FrogColor`中`model`是直接传入`_FirstPageState`，这样耦合度会比较高  
所以我们将这个对象转为`泛型`，封装后如下：

新建 `state_provider.dart`文件:

import 'package:flutter/material.dart';
    
    /// 使用泛型传入数据
    class IProvider<T> extends InheritedWidget {
      // 数据
      final T data;
      // 方法
      final Function() doSomeThing;
    
      IProvider({Key key, Widget child, this.data,  this.doSomeThing})
          : super(key: key, child: child);
    
      @override
      bool updateShouldNotify(IProvider oldWidget) {
        return data != oldWidget.data;
      }
      static IProvider<T> of<T>(BuildContext context) {
        return context.dependOnInheritedWidgetOfExactType<IProvider<T>>();
      }
    }

封装好的使用需要传入`数据类`：

@override
    Widget build(BuildContext context) {
    
      return Scaffold(
          appBar: AppBar(
            title: Text('InheritedWidget'),
          ),
          body: IProvider<_FirstPageState>(// 传入 _FirstPageState
            data: this
            doSomeThing: _changeColor,//提供修改数据的方法
            child: FColor('哈哈哈'),
          )
      );
    }

以上就是`InheritedWidget`的使用，使用`InheritedWidget`的方式可以降低数据和`UI`界面的耦合。  
直接使用`InheritedWidget`不免有些麻烦，`Flutter`提供了更加强大的 **[Provider 库][Provider]**，用于实现依赖注入和状态管理（后续了解之后详细介绍）。

`InheritedWidget`仅限与从父`widget`向下传递数据。那么从子`widget`向上传递数据如何实现呢？`Notifiation`就可以实现。

### Notification ###

> `Notification` 数据共享方式是从子 `widgetw 向上传递至父`widget\`。

在之前的文章 [Flutter 嵌套滚动 CustomScrollView 示例][Flutter _ CustomScrollView] 中，我们使用`NotificationListener`去监听子`child CustomScrollView`的滑动距离。

同理，将子`widget`的数据传递给父`widget`也可以用这个方式实现

#### 示例 ####

从子`widget`向上发送数据，在父`widget`中监听到消息并打印在控制台。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]  
以上就是`Notification`的使用，使用`Notification`的方式可以子`widget`的数据通过`dispatch`发送给父`widget`。  
无论是 `InheritedWidget`还是 `Notificaiton`，都需要依赖与父子关系的`widget`。  
而一些场景下的数据传递是没有这层关系的，  
在`Android`中有事件总线的方式可以很方便的实现这类场景的数据传递，  
`Flutter`中也有这样类似的库：[EventBus][]

### EventBus ###

> 使用`Dart Streams`进行应用程序解耦的简单事件总线。

#### 示例 ####

1.  引入库

dependencies:
      event_bus: ^1.1.1

1.  初始化`EventBus`，并定义消息数据类

final eventBus = new EventBus();
    
    /// 传递的数据
    class MsgEvent{
      final String msg;
      MsgEvent(this.msg);
    }

1.  监听

// 监听数据变化
    eventBus.on<MsgEvent>().listen((event) {
       print("接收到的数据：${event.msg}");
     });

1.  发送数据

eventBus.fire(MsgEvent("子 widget 发送过来的数据：老头子"));

通过以上的4步即可完成不依赖`widget`的数据传输。

#### 示例完整源码 ####

import 'package:event_bus/event_bus.dart';
    import 'package:flutter/material.dart';
    
    final eventBus = EventBus();
    
    class FirstPage extends StatefulWidget {
      @override
      _FirstPageState createState() {
        return _FirstPageState();
      }
    }
    
    class _FirstPageState extends State<FirstPage> {
    
      @override
      void initState() {
        super.initState();
        // 监听数据变化
        eventBus.on<MsgEvent>().listen((event) {
          print("接收到的数据：${event.msg}");
        });
      }
    
      @override
      void dispose() {
        super.dispose();
        // 释放资源
        eventBus.destroy();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('EventBus'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // 子 widget
                RaisedButton(
                  // 按钮点击时分发通知
                  onPressed: () {
                    eventBus.fire(MsgEvent("父 widget 发送过来的数据：我是你爸爸"));
                  },
                  child: Text("父 widget 发送数据"),
                ),
                CustomChild(),
              ],
            ));
      }
    }
    
    class CustomChild extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return RaisedButton(
          // 按钮点击时分发通知
          onPressed: () {
            eventBus.fire(MsgEvent("子 widget 发送过来的数据：老头子"));
          },
          child: Text("子 widget 发送数据"),
        );
      }
    }
    
    /// 消息数据类
    class MsgEvent{
      final String msg;
      MsgEvent(this.msg);
    }

wan~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/83ce88e3841a44af82f4fa71aac662cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/3cf1eeb7456648b592a6805894174bc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/62cef9220dd848fd8fd502c0c9cf0813.png
[Provider]: https://pub.dev/packages/provider
[Flutter _ CustomScrollView]: https://blog.csdn.net/ITxiaodong/article/details/104968707
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/046937eb3f034ad4b9d60fcc7d5e72f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/c52391d3b4ba4c33b8117892678eacf7.png
[EventBus]: https://pub.dev/packages/event_bus