flutter web中Flutter与js相互调用

1、Flutter调用JS端方法,含参数和返回值

index.html 端

……
<script type="text/javascript">
// js端方法
function add(int a, int b){
  return a + b;
}
……

Flutter端

  1. 引入js库
import 'dart:js' as js;
  1. 调用js端方法
var sum = js.context.callMethod('add', [12, 34]);
debugPrint("Flutter调用JS端方法add(12,34)结果为:$sum");

2、JS调用Flutter端方法,含参数和返回值

Flutter端

  1. 引入js库
import 'dart:js' as js;
  1. 编写Flutter端方法
int add(int a, int b){
  return a + b;
}
  1. 注册到js组建
@override
  Widget build(BuildContext context) {
     js.context["add"]=add;

……
}

index.html 端

……
<script type="text/javascript">
// js端方法
function test(){
    var sum = window.add(12,23);
    alert("JS调用Flutter端方法add(12,23)结果为:" + data);
}
……

PS:为了模拟JS调用Flutter,可在Flutter端触发JS端的test()方法。

js.context.callMethod("test")
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。