flutter webview加载http图片失败处理

1、简介

开始接手flutter项目，项目flutter版本2.5.3，目前最新2.10.3。

项目中使用webview为 flutter_webview_pro 1.0.0 源码修改版，已经支持webview显示https网页，加载http图片，但是最近发现在一些android 12版本手机上，比如小米，一加手机，h5页面的输入框无法调起软键盘。

2、结论

多方咨询、调研发现，flutter在最近几个版本修复了很多webview的问题。

经过创建demo测试、验证，webview_flutter 当前最新版本3.0.1，在特殊机型已经可以调起软键盘，但是http图片还是无法显示。

3、解决

在老版本的FlutterWebView中，加载图片是这样修改源码解决的：Flutter中使用webview_flutter遇到的https和http混用问题（Android）_Mr_Tony的博客-CSDN博客d

 但是最新版已经改的面目全非，在GeneratedPluginRegistrant 中仍然是加载WebViewFlutterPlugin

但是在 WebViewFlutterPlugin中虽然使用的仍然是FlutterWebViewFactory

其中setUp代码 

private void setUp(
      BinaryMessenger binaryMessenger,
      PlatformViewRegistry viewRegistry,
      Context context,
      View containerView,
      FlutterAssetManager flutterAssetManager) {

    InstanceManager instanceManager = new InstanceManager();

    viewRegistry.registerViewFactory(
        "plugins.flutter.io/webview", new FlutterWebViewFactory(instanceManager));

    webViewHostApi =
        new WebViewHostApiImpl(
            instanceManager, new WebViewHostApiImpl.WebViewProxy(), context, containerView);
    javaScriptChannelHostApi =
        new JavaScriptChannelHostApiImpl(
            instanceManager,
            new JavaScriptChannelHostApiImpl.JavaScriptChannelCreator(),
            new JavaScriptChannelFlutterApiImpl(binaryMessenger, instanceManager),
            new Handler(context.getMainLooper()));

    WebViewHostApi.setup(binaryMessenger, webViewHostApi);
    JavaScriptChannelHostApi.setup(binaryMessenger, javaScriptChannelHostApi);
    WebViewClientHostApi.setup(
        binaryMessenger,
        new WebViewClientHostApiImpl(
            instanceManager,
            new WebViewClientHostApiImpl.WebViewClientCreator(),
            new WebViewClientFlutterApiImpl(binaryMessenger, instanceManager)));
    WebChromeClientHostApi.setup(
        binaryMessenger,
        new WebChromeClientHostApiImpl(
            instanceManager,
            new WebChromeClientHostApiImpl.WebChromeClientCreator(),
            new WebChromeClientFlutterApiImpl(binaryMessenger, instanceManager)));
    DownloadListenerHostApi.setup(
        binaryMessenger,
        new DownloadListenerHostApiImpl(
            instanceManager,
            new DownloadListenerHostApiImpl.DownloadListenerCreator(),
            new DownloadListenerFlutterApiImpl(binaryMessenger, instanceManager)));
    WebSettingsHostApi.setup(
        binaryMessenger,
        new WebSettingsHostApiImpl(
            instanceManager, new WebSettingsHostApiImpl.WebSettingsCreator()));
    FlutterAssetManagerHostApi.setup(
        binaryMessenger, new FlutterAssetManagerHostApiImpl(flutterAssetManager));
    CookieManagerHostApi.setup(binaryMessenger, new CookieManagerHostApiImpl());
  }

但是 FlutterWebViewFactory中完全变样了：

@Override
  public PlatformView create(Context context, int id, Object args) {
    final PlatformView view = (PlatformView) instanceManager.getInstance((Integer) args);
    if (view == null) {
      throw new IllegalStateException("Unable to find WebView instance: " + args);
    }
    return view;
  }

PlatformView  是什么鬼？此时也无法查看它的源码，如果有知道怎么看的大佬可以给个答案。

在新版本卡住了怎么办？我想到了返回老版本看看。

 创建的是FlutterWebView，找到这个类点进去，在创建FlutterWebView的有个关键代码：

 在InputAwareWebView产看，居然是继承的android的WebView： 

那回到我们新版本的PlatformView，是不是它也继承了WebView呢？

因为Flutter是可以直接改源码的，尝试一下：

@Override
  public PlatformView create(Context context, int id, Object args) {
    final PlatformView view = (PlatformView) instanceManager.getInstance((Integer) args);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0以上强制启用https和http混用模式
      if (view instanceof WebView){
        ((WebView)view).getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
      }
    }
    if (view == null) {
      throw new IllegalStateException("Unable to find WebView instance: " + args);
    }
    return view;
  }

 运行起来，果然可以加载http图片了！

其实最终修改的，只是 webview_flutter_android 中的创建的原生 FlutterWebView ！

4、待完善

上面只是本地修复了，但是公司项目一般都是远程打包，比如Jenkins，不能修改flutter插件代码，远程怎么解决呢？

第一种，是和老版本解决方式一样，将用到的核心类源码都拷贝到本地插件，修复后，在pubspec.yaml 依赖本地webview_flutter插件，比如：

第二种，有没有只是调用个 方法，就能设置解决的呢？

尝试一：增加flutter桥接，将webview对象传到android设置好后，再将对象返回。

结果：失败；

尝试二：将flutter的webview对象内存地址值传递到android，android获取、设置、返回。

结果：可能脑洞开大了，还未找到方法实现。。。

尝试三：

5、最后

如果有大佬知道简单修复方式，请留言告知一下，或者等flutter官方修复吧。。。

代码007普通

打赏 收藏 海报 链接