记录一次Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）

小鸡仔hana 2022-01-06 14:38:21

记录一次Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）

问题由来
问题现象：
1.使用flutter插件
2.使用原生WebView
3.使用WebView加载Html
4.修改WebView配置和Html样式
问题总结：

问题由来

最近flutter在使用webview展示图片的时候，flutter插件都无法显示，很奇怪，服务返回的图片地址是https开头的图片，网页上和ios端能直接下载，但是在Android手机上就是无法显示，于是乎开始找解决办法。通过更换各种flutter插件，比如webview_flutter、flutter_webview_plugin都不行之后就换成了原生WebView。但是也是无法显示。

问题现象：

1.使用flutter插件

使用的是flutter的插件flutter_webview_plugin，图片地址为https地址的，确认在网页和IOS是可以直接访问的。

在这里插入图片描述

很遗憾，没有任何日志显示异常，我甚至比对了正常显示的时候（使用百度上找的一张图）和错误时的日志无任何差别。后来就索性想着自己写android原生WebView界面来显示图片。

2.使用原生WebView

        webView.loadUrl(path);
        webView.getSettings().setMediaPlaybackRequiresUserGesture(true);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //设置WebView属性，能够执行Javascript脚本
        webView.getSettings().setJavaScriptEnabled(true);//设置js可用
        webView.getSettings().setDisplayZoomControls(false);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); //设置滚动条样式
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        //系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
            
        })

很遗憾还是和上图一样，还是显示成白色，我把日志打开也是没有任何日志。就在我一头雾水就快放弃时，我发现webview还有一种api加载图片，是通过传入html的方式加载的。于是我使用了第三种方法。

3.使用WebView加载Html

使用html之后图片(因为涉及到业务，图片我这里用网络图片示例了)竟然可以出来了

         //访问网页
        webView.loadDataWithBaseURL(null, "<!DOCTYPE html><html><body><div><img src="+ path +
                " /></div></body></html>", "text/html", "utf-8", null);
        webView.getSettings().setMediaPlaybackRequiresUserGesture(true);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //设置WebView属性，能够执行Javascript脚本
        webView.getSettings().setJavaScriptEnabled(true);//设置js可用
        webView.getSettings().setDisplayZoomControls(false);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); //设置滚动条样式
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

在这里插入图片描述

但是还存两个问题
1.图片大小宽度不适配屏幕大小
2.顶部左边底部都有白边

4.修改WebView配置和Html样式

主要进行两个地方的修改
1.Html中增加style，margin和padding分别设置为0，注意body，div和img标签都需要设置
2.WebView设置中设置setUseWideViewPort和setLoadWithOverviewMode都为true就正常显示了

        webView.loadDataWithBaseURL(null, "<!DOCTYPE html><html><head><style>*{width:100%}</style></head><body style='margin:0;padding:0><div style='margin:0;padding:0><img src="+ path +
                " style='margin:0;padding:0'/></div></body></html>", "text/html", "utf-8", null);
        webView.getSettings().setUseWideViewPort(true);//调整到适合webview的大小，不过尽量不要用，有些手机有问题
        webView.getSettings().setLoadWithOverviewMode(true); ///根据手机分辨率显示图片
        ......