最近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, "+ path +
" />", "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.顶部左边底部都有白边
主要进行两个地方的修改
1.Html中增加style,margin和padding分别设置为0,注意body,div和img标签都需要设置
2.WebView设置中设置setUseWideViewPort和setLoadWithOverviewMode都为true就正常显示了
webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
webView.getSettings().setUseWideViewPort(true);//调整到适合webview的大小,不过尽量不要用,有些手机有问题
webView.getSettings().setLoadWithOverviewMode(true); ///根据手机分辨率显示图片
......
最后显示的图片就正常了。
问题总结:其实最开始为什么flutter插件无法显示的问题我到现在还没找到原因,项目原因我这边选择了另一种实现方式,如果有人知道的话可以告诉我下。作为android开发,确实没了解Html的加载方式,也是自己琢磨加请教前端的人才知道的,得多学习。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)