如何使用 dart:js 将选项传递给 javascript 函数？
pjo*_*hin 5 dart dart-js-interop flutter flutter-web
我有以下功能性 JavaScript 代码来演示我想要实现的目标。它应该输出传递给方法的对象，然后输出属性“a”的值。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
window.theObjectCall = function(x) {
console.log(x);
console.log(x.a);
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
我有以下 dart 代码，它可以工作，但是“a”无法按我的预期访问。
@JS('window')
library whatever;
import 'dart:js';
import 'package:js/js.dart';
@JS('theObjectCall') // Accessing method getCurrentPosition from Geolocation API
external void theJsObjectCall(JsObject theObject);
void someJsCallWithObject() {
var object = JsObject(context['Object']);
object['a'] = 'xxx';
theJsObjectCall(object);
}
在控制台中执行以下日志“未定义”。
您应该单独定义对象，如下面的示例所示。原因是 javascript 对于 dart 类（包括JSObject. 正如文档所示，它只是一个代理，供您访问 Dart 中的 js 对象属性。我不确定你是否可以使用它。
但是，如果您已经知道要传递的对象的结构，那么您可以使用该结构定义一个匿名类，并将定义的 JS 函数传递给它。然后 dart2js 将适当地处理转换。
@JS('window')
library whatever;
import 'dart:js';
import 'package:js/js.dart';
import 'package:flutter/material.dart';
@JS('theObjectCall') // Accessing method getCurrentPosition from Geolocation API
external void theJsObjectCall(ObjectYouWantToSend theObject);
void someJsCallWithObject() {
ObjectYouWantToSend oywts = ObjectYouWantToSend(a: 'xyz');
theJsObjectCall(oywts);
}
@JS()
@anonymous
class ObjectYouWantToSend {
external factory ObjectYouWantToSend({
String a,
});
external String get a;
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Center(
child: FlatButton(
onPressed: someJsCallWithObject,
child: Text('Call The js Function.'),
),
),
),
),
);
}
}
您可以在我的存储库中找到代码。
这是部署后的样子。
| 归档时间： |
|
| 查看次数： |
2293 次 |
| 最近记录： |