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”时我得到错误“type'String'不是'newSBD'''SegmentedButtonData'类型的子类型。”。

我尝试使用“as”，但也没用。

似乎“detail”对象是一个String，即使我发送了SegmentedButtonData的实例。

我是否需要序列化/反序列化，或者我是否遗漏了一些细节？（哈哈）。

Answer 1

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

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

从理论上讲，你可以使用Serialization包来实现这一点，但它过度杀戮并且我仍然遇到反序列化问题，或者你可以做一些像使用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());
}

希望这对某人有所帮助。

如何在Dart中的CustomEvent中测试细节类型？

1 个答案: