webview_flutter官方插件选择文件、图片的问题

前言

webview_flutter官方的webview插件,很多功能缺失,现在H5有上传图片的需求,但官方的插件并不支持。
webview_flutter官方插件选择文件、图片的问题

点击H5中的选择文件,没有任何响应,问题issues,官方库的issues上已经有提出相关问题。

原因分析

H5要想调用原生选择图片功能,需要webview重写WebChromeClient类中的onShowFileChooser方法。

解决方案

使用其他完善的webview替代

参考其他webview插件实现,移植相关代码

参考flutter_inappwebview中的onShowFileChooser方法,进行相关移植,基于webview_flutter-2.0.13版本改造。源码分支copy_inappwebview_select_file_20210930,这个实现方式没有使用新的Activity,而是直接监听了OnActivityResult

网友提出的PR,不过审核还没通过,个人验证可行

相关PR webview_flutter Add file chooser on Android 已经有网友提出PR,但还没合并到主分支。

提取代码,源码分支copy_net_select_file_20210930,实现方式是打开了一个透明的Activity去选择图片,然后再关闭。

其他问题

由于官方的webview_flutter插件只实现了基本功能,能用inappwebview代替最好使用inappwebview,功能较为强大。但inappwebview扩展功能较多,可能会引起奇怪问题,目前个人使用还挺好。

一些常见功能,但webview_flutter还不能使用,可以根据自己情况去做适配

  1. 加载http图片
  2. H5需要使用拍照、选择图片等功能。
  3. 允许定位GeolocationPermissionShowPromptResponse。
  4. 隐藏进度条

关于H5底部的输入框,键盘弹起会挡住的问题

可以使用以下方式

Scaffold(
      resizeToAvoidBottomInset: Platform.isIOS ? false : true,
      ...
      body: SafeArea(
      	child:	 WebView()
      )
)

最主要的地方是resizeToAvoidBottomInset属性,默认为true,从属性理解上来看
webview_flutter官方插件选择文件、图片的问题
大致意思就是,在true的情况下,防止组件内widget被键盘遮挡。这个属性在android有效。但在ios这个属性与android相反,可能会出现H5中的输入框被顶到页面上部。第一张图是H5的底部输入框位置错乱,第二章图就是正常。
所以resizeToAvoidBottomInset: Platform.isIOS ? false : true,该值在ios为false就不会造成输入框位置错误,在android为true,就不会在弹出键盘时挡住input输入框。
webview_flutter官方插件选择文件、图片的问题

上一篇:我的第一单元笔记


下一篇:H5和CSS3的知识点梳理(46)