javascript - 在 Dart 和 JavaScript 之间传递对象列表——转换列表列出

Question

我正在尝试从 Dart 访问Google Maps Geocoding JavaScript API。

我有这段代码，它使用js 包转换为 Dart：

@JS('google.maps')
library google_maps;

import 'package:js/js.dart';

@JS()
class Geocoder {
  external Geocoder();
  external geocode(GeocodeOptions options, void Function(List<GeocodeResult> results, String status) callback);
}

@JS()
@anonymous
class GeocodeResult {
  // ...
}

...我从我的应用程序中调用它，如下所示：

geocoder.geocode(
  GeocodeOptions(
    address: address,
    region: region,
  ),
  allowInterop((results, status) {
    // ???
  }),
);

问题在于results回调函数中列表的类型：

void Function(List<GeocodeResult> results, String status)

将类型设置为GeocodeResult，我收到一个错误：

期望一个类型的值，List<GeocodeResult>但得到一个类型List<dynamic>

但是如果我将类型更改为dynamic，那么我在 dart 中的回调函数会收到一个List<NativeJavaScriptObject>.

我不知道该怎么办NativeJavascriptObject！

• 它不是 a Map，所以我不能使用方括号 -result['geometry']
• 如果我尝试使用List.cast<GeocodeResult>()，则会出现错误：dart.notNull() is not a Function
• 它是一个飞镖对象，所以我不能只使用点符号访问任意属性 -result.geometry

欢迎任何和所有的建议，谢谢。

标签： javascriptflutterdartflutter-webdart-js-interop

Answer 1

好的，我通过在 JavaScript 中转换为 JSON，然后将 JSON 解析为Mapin dart 来实现它：

geocoder.geocode(
  GeocodeOptions(
    address: address,
    region: region,
  ),
  allowInterop((results, status) {
    final list = List<Map<String, dynamic>>();
    results.forEach((jsObject) {
      //Convert NativeJavascriptObject to Map by encoding and decoding JSON
      final json = stringify(jsObject);
      final map = Map<String, dynamic>.from(jsonDecode(json));
      list.add(map);
    });
  }),
);

这使用stringify()下面的JSON.stringify()从 JavaScript 调用的 。

@JS('JSON.stringify')
external String stringify(Object obj);