如何通过flutter_js向JavaScript传递对象参数？

完全可行，下面是两种常用的实现方式：

方式一：通过JSON字符串转换传递 #

这是最通用的方法，适用于所有版本的flutter_js：

Dart端代码 #

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter_js/flutter_js.dart';

// 定义要传递的Dart对象（Map本质就是Dart中的键值对对象）
Map<String, dynamic> userInfo = {
  'username': 'Max',
  'age': 30,
  'settings': {
    'darkMode': true,
    'notifications': false
  },
  'tags': ['flutter', 'javascript']
};

// 将对象转为JSON字符串
String userJson = jsonEncode(userInfo);

// 加载JS文件并执行
String blocJs = await rootBundle.loadString("assets/js/bloc.js");
final jsResult = jsRuntime.evaluate('''
$blocJs
// 在JS中解析JSON字符串为JS对象并调用方法
handleUserObject(JSON.parse('$userJson'))
''');

JS端代码（assets/js/bloc.js） #

function handleUserObject(user) {
  // 直接操作JS对象
  console.log(`用户名：${user.username}`);
  console.log(`深色模式：${user.settings.darkMode}`);
  // 处理逻辑后返回结果
  return `已处理用户：${user.username}`;
}

方式二：直接传递Dart Map（高版本flutter_js支持） #

如果你的flutter_js版本足够新（通常v0.6.0+），可以直接将Dart的Map对象传递给JS方法，库会自动将其转换为JS对象：

Dart端代码 #

import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter_js/flutter_js.dart';

Map<String, dynamic> product = {
  'id': 1001,
  'name': 'Flutter开发手册',
  'price': 59.9,
  'inStock': true
};

// 先加载JS文件到上下文
await jsRuntime.evaluate(await rootBundle.loadString("assets/js/bloc.js"));

// 直接传递Map对象调用JS方法
final result = await jsRuntime.callMethod(
  'handleProduct', // JS中的方法名
  [product], // 传递的参数，直接传Map
);

JS端代码（assets/js/bloc.js） #

function handleProduct(product) {
  console.log(`商品名称：${product.name}`);
  console.log(`库存状态：${product.inStock ? '有货' : '缺货'}`);
  return `商品ID ${product.id} 处理完成`;
}

注意事项 #

• 若使用JSON转换方式，jsonEncode会自动处理字符串中的特殊字符（如引号、换行），避免语法错误。
• 直接传递Map的方式需要确保flutter_js版本支持，若出现兼容性问题，优先使用JSON转换方案。

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