Flutter3.22.0中用dart:js_interop从JS调用Dart函数报错求助

错误原因 #

Flutter 3.22.0的WebAssembly编译模式中，dart:js_interop对交互类型有严格限制，不能直接使用dynamic作为函数参数类型——dynamic不属于JS interop允许的兼容类型集合，必须使用dart:js_interop提供的JS原生类型（如JSAny?、JSNumber等）。

修复方案 #

步骤1：导入必要库 #

确保导入dart:js_interop：

import 'dart:js_interop';

步骤2：修改函数与interop定义 #

根据需求选择以下方案之一：

方案一：兼容任意JS类型（推荐）

将参数类型替换为JSAny?，在Dart函数内做类型判断：

// Dart端处理函数
void updateStatus(JSAny? status) {
  if (status is JSNumber) {
    // 将JS数字转为Dart整数
    print(status.toDartInt());
  }
}

// JS interop setter定义
@JS('status')
external set updateStatus(void Function(JSAny?) f);

方案二：明确指定数字类型

如果确定JS传入的是数字，直接使用JSNumber作为参数类型：

// Dart端处理函数
void updateStatus(JSNumber status) {
  print(status.toDartInt());
}

// JS interop setter定义
@JS('status')
external set updateStatus(void Function(JSNumber) f);

步骤3：绑定函数 #

在初始化逻辑（如initState）中绑定函数：

updateStatus = updateStatus;

内容的提问来源于stack exchange，提问作者ARASHz4