如何在Flutter中从一个有状态的小部件向另一个有状态的小部件广播事件

Question

我想从一个Stateful Widget广播事件到另一个Widget，但似乎找不到实现的方法。我安装了这个插件：event: ^1.1.4，但它没有响应。我想要像下面这样的效果：

Stateful Widget 1:
SomeEventClass.broadcastEvent();

Stateful Widget 2:
SomeEventClass.subscribe();

- marvin ralph

---

好的，我理解的是，您想在B屏幕内触发A屏幕的一个函数。对吗？ - Faiizii Awan

Answer 1

通过使用像这样的东西。

class ContinuousStream {
  _DataStore _mStorage = _DataStore.getInstance();

  /// Sets a new value [value] to the data stream [stream].
  /// If there are active subscribers, the value will be dispatched to them.
  void emit(String stream, var value) {
    _mStorage?.setValue(stream, value);
  }

  /// Subscribes to the given stream [stream].
  /// If stream already has data set, it will be delivered to the [callback] function.
  void on(String stream, void Function(Object) callback) {
    _mStorage?.setCallback(stream, callback);
  }

  /// Returns the current value of a given data [stream].
  Object getValue(String stream) {
    return _mStorage?.getValue(stream);
  }
}

// Storage class for ContinuousStream.
class _DataStore {
  // Singleton Instance for DataStore
  static _DataStore _instance;

  // Map instance to store data values with data stream.
  HashMap<String, _DataItem> _mDataItemsMap = HashMap();

  // Sets/Adds the new value to the given key.
  void setValue(String key, var value) {
    // Retrieve existing data item from map.
    _DataItem item = _mDataItemsMap[key];

    item ??= _DataItem();

    // Set new value to new/existing item.
    item.value = value;

    // Reset item to the map.
    _mDataItemsMap[key] = item;

    // Dispatch new value to all callbacks.
    item.callbacks?.forEach((callback) {
      callback(value);
    });
  }

  // Sets/Adds the new callback to the given data stream.
  void setCallback(String key, Function(Object) callback) {
    if (callback != null) {
      // Retrieve existing data item from the map.
      _DataItem item = _mDataItemsMap[key];

      item ??= _DataItem();

      // Retrieve callback functions from data item.
      List<Function(Object)> callbacks = item.callbacks;

      // Check if callback functions exists or not.
      if (callbacks == null) {
        // If it's null then create new List.
        callbacks = List();

        // Set callback functions list to data item.
        item.callbacks = callbacks;

        // Set the data item to the map.
        _mDataItemsMap[key] = item;
      }

      // Add the given callback into List of callback functions.
      callbacks.add(callback);

      // Dispatch value to the callback function if value already exists.
      if (item.value != null) {
        callback(item.value);
      }
    }
  }

  // Returns current value of the data stream.
  Object getValue(String key) {
    return _mDataItemsMap[key].value;
  }

  // Returns singleton instance of _DataStore
  static _DataStore getInstance() {
    _instance ??= _DataStore();
    return _instance;
  }
}

// Data class to hold value and callback functions of a data stream.
class _DataItem {
  var value;
  List<Function(Object)> callbacks;
}

创建这个类之后，您可以初始化并访问流。例如，在StateFulWidget 1和StateFulWidget 2中都需要执行此操作。

ContinuousStream continuousStream = new ContinuousStream();

然后从StateFulWidget1开始:

void send() {
      String message = "Hello";
      continuousStream.emit("chat-message", message);
  }

这对应于您的广播事件。

来自StatefulWidget2：

continuousStream.on("chat-message", (message) {
      print("Message Received: $message");
    });

这对应于您的订阅事件。 这应该解决您的问题。

- Darsh Shah

---

大量类型错误：“因为它具有'Object'的返回类型，所以无法从方法'getValue'返回类型为'Object？'的值。” - Oliver Dixon