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

最新推荐文章于 2023-07-17 11:14:55 发布

小鸡仔hana

最新推荐文章于 2023-07-17 11:14:55 发布

阅读量2.4k

点赞数 1

分类专栏： Flutter 文章标签： android webview flutter

本文链接：https://blog.csdn.net/u011388551/article/details/122315853

版权

Flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

记录一次Flutter调用android原生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); ///根据手机分辨率显示图片
        ......

最后显示的图片就正常了。

在这里插入图片描述

问题总结：

其实最开始为什么flutter插件无法显示的问题我到现在还没找到原因，项目原因我这边选择了另一种实现方式，如果有人知道的话可以告诉我下。作为android开发，确实没了解Html的加载方式，也是自己琢磨加请教前端的人才知道的，得多学习。

小鸡仔hana

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）

这里写自定义目录标题记录一次Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）问题由来问题现象：1.使用flutter插件2.使用原生WebView3.使用WebView加载Html4.修改WebView配置和Html样式问题总结：记录一次Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）问题由来最近flutter在使用webview展示图片的时候，flutter插件都无法显示，很奇怪，服务返回的图片地址是https开头的
复制链接

扫一扫