Flutter WebView与JavaScript的通信实现方法咨询

看起来你正在尝试在Flutter WebView里搭建和JavaScript的双向通信链路对吧？我结合你给出的代码片段，把这块的实现细节补全并梳理清楚～

一、JavaScript调用Flutter（JS向Native发消息） #

你代码里已经开始写addJavaScriptChannel了，我帮你补全完整的实现：
在WebViewController的初始化链里，把JavaScriptChannel的配置写完整：

..addJavaScriptChannel(
  'callNative', // 这个通道名称要和网页JS里调用的一致
  onMessageReceived: (JavaScriptMessage message) {
    // 这里处理JS传来的消息，比如打印日志、触发Flutter的业务逻辑
    print('收到JS发送的消息：${message.message}');
    // 举个例子：弹出一个SnackBar提示用户
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('JS调用了Native：${message.message}')),
      );
    }
  },
)

然后在网页的JavaScript代码里，只需要通过这个通道名称发消息就行：

// 网页里的JS代码
callNative.postMessage('我是来自网页的消息');

二、Flutter调用JavaScript（Native向JS发消息/执行代码） #

如果需要主动从Flutter触发网页里的JS逻辑，可以用WebViewController的runJavaScript或runJavaScriptReturningResult方法：
比如你可以在页面里加一个按钮，点击后调用网页的JS函数：

// 在你的build方法里添加按钮
ElevatedButton(
  onPressed: () async {
    // 执行网页里的JS函数（假设网页里有个showAlert函数）
    await _webViewController.runJavaScript('showAlert("来自Flutter的问候")');
    
    // 如果需要获取JS执行的返回值，比如获取网页标题
    String? pageTitle = await _webViewController.runJavaScriptReturningResult('document.title');
    print('当前网页标题：$pageTitle');
  },
  child: const Text('调用网页JS方法'),
)

几个实用注意点 #

• 一定要确保设置了JavaScriptMode.unrestricted，不然网页的JavaScript功能会被限制，通信自然也无法正常工作；
• 建议在onPageFinished回调之后再执行Flutter调用JS的逻辑，避免网页还没加载完成就调用JS导致报错；
• 如果JS传递的是复杂数据（比如JSON），可以在JS里把对象转成字符串，Flutter这边再解析成Dart对象。

备注：内容来源于stack exchange，提问作者Sat