flutter_webview_plugin与js互动

最新推荐文章于 2025-03-09 19:30:37 发布

原创最新推荐文章于 2025-03-09 19:30:37 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#导出A4PDF #java导出pdf #pdf水印

flutter 专栏收录该内容

14 篇文章

订阅专栏

本文分享了在使用Flutter的WebView组件遇到的问题及解决方案。在安卓4.4(API19)设备上，webview_flutter存在兼容性问题，作者转向使用flutter_webview_plugin，并实现了Flutter与JS之间的交互功能。文章还探讨了JS调用Flutter的限制，如不能直接使用setState，以及WebView显示层级导致的弹窗遮挡问题。

最近在使用webview_flutter做安卓的浏览器功能，在测试手机模拟器(安卓5.0)一切正常，但拿去现场生产设备(安卓4.4 API19),运行有误。发现webview_flutter支持API19有误，只能更换flutter_webview_plugin试试，一切正常。把原来的JS互动的功能转化：

//flutter调用js
final flutterWebViewPlugin = FlutterWebviewPlugin();
final future =flutterWebViewPlugin.evalJavascript("SCANRsult('"+barcode+"')");
      future.then((String result) {
        print('调用js后的返回值...');
      });




_showWEbview() {
    return WebviewScaffold(
      url: url,
      javascriptChannels: jsChannels,
      withZoom: false, 
      withLocalStorage: true,
      withJavascript: true, 
    );
  }


//这里是js调用flutter
final Set<JavascriptChannel> jsChannels = [
    JavascriptChannel(
        name: 'SetAppTitle6',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);
        }),
    JavascriptChannel(
        name: 'ScanBarcode',
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);          
        }),
  ].toSet();


//这里是网页调用JS,在html里面
if(window.hasOwnProperty('SetAppTitle6')){
          window.SetAppTitle.postMessage("动态设置标题");  
      }

这里有两个问题：

1）在js调用flutter里面不能直接使用setState设置内容，本人使用even_bus设置

2) webview显示在最上层，弹出窗口会显示不出来，这个还没有解决。