dart - 如何在Dart中通过CustomEvent测试详细信息的类型？

Question

我希望您能原谅一个真正的新手问题，但我一直无法找到解决该问题的好方法……

如果我上简单的课...

library segmented_buttons_list;

import 'package:web_ui/observe.dart';

@observable
class SegmentedButtonData {
  String description;
  int index;

  SegmentedButtonData(this.description, this.index);

  String toString() => "$description";
}

…并从WebComponent调度一个事件，其中包含该类的详细信息……

library segmented_buttons_list;

import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'package:segmented_buttons_list/segmented_button_data.dart';

class SegmentedButtonComponent extends WebComponent {
  int index;
  String description;

  mainAction() {
    SegmentedButtonData detail = new SegmentedButtonData(description, index);
    CustomEvent event = new CustomEvent("MainActionEvent", canBubble: true, cancelable: true, detail: detail);
    print("SegmentedButtonComponent dispatching ${event.type} for '${event.detail}'.");
    dispatchEvent(event);
  }
}

…我如何正确测试和使用该详细信息作为预期类型？

我尝试使用“is”，但是在事件处理程序中却不起作用...

if (event.detail is SegmentedButtonData) {
  SegmentedButtonData newSBD = event.detail;
  int newIndex = newSBD.index * 3;
  print(newIndex.toString());
}

…并且当我注释掉“if”时，出现错误“类型'String'不是'newSBD'类型'SegmentedButtonData'的子类型。”

我尝试使用“as”，但这也不起作用。

即使我发送了SegmentedButtonData实例，似乎“详细”对象还是一个字符串。

我需要序列化/反序列化，还是缺少一些细节？ (哈哈)。

Answer 1

由于Dart CustomEvent机制是基于标准的Web浏览器事件构建的，因此Dart之外的其他代码(JavaScript)可以捕获事件，因此有意序列化了CustomEvent的详细信息。

这意味着为了获得最佳的可预测性，最好手动序列化CustomEvent详细信息有效负载的数据，以便您可以放心地反序列化。

从理论上讲，您可以使用序列化程序包来执行此操作，但是它过于强大，而且我在反序列化方面仍然遇到问题，或者您可以执行与使用JSON一样简单的操作(假设您的类属性主要是字符串，数字，列表和映射)。

数据类现在具有toJson()函数...

library segmented_buttons_list;

import 'package:web_ui/observe.dart';

@observable
class SegmentedButtonData {
  String description;
  int index;

  SegmentedButtonData(this.description, this.index);

  String toString() => "$description";

  Map toJson() {
    return {"description": this.description, "index": this.index};
  }
}

...我们将数据对象序列化为JSON以添加到CustomEvent ...

library segmented_buttons_list;

import 'dart:html';
import 'dart:json' as json;
import 'package:web_ui/web_ui.dart';

import 'package:segmented_buttons_list/segmented_button_data.dart';

class SegmentedButtonComponent extends WebComponent {
  int index;
  String description;

  mainAction() {
    SegmentedButtonData sbd = new SegmentedButtonData(description, index);
    String detail = json.stringify(sbd);
    CustomEvent event = new CustomEvent("MainActionEvent", canBubble: true, cancelable: true, detail: detail);
    dispatchEvent(event);
  }
}

...并在处理事件时反序列化以检查和使用事件详细信息...

Map detail = json.parse(event.detail);

if (detail is Map && detail.containsKey("description") && detail.containsKey("index")) {
  SegmentedButtonData newSBD = new SegmentedButtonData(detail["description"], detail["index"]);
  int newIndex = newSBD.index * 3;
  print(newIndex.toString());
}

希望这对某人有帮助。