正文
flutter的webvie，flutter的webview
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Flutter中 webview的键盘问题解决
webview的版本是webview_flutter: ^0.3.22+1
现在遇到的问题是如果webview中输入密码的话，像华为这种会调用自己的安全键盘，这时候就会黑屏，应该是内部计算键盘高度的问题。这时候没办法了，网页web端密码框需要修改一下了自己自定义一下不调用密码类型就好，但是无法被输入框弹上去，后来解决方案是用SingleChildScrollView包裹一下，然后自己监听一下键盘的弹窗和隐藏做一下jump的高度就好了
ps： jump的时候要注意高度，可以在键盘出来的时候底部增加一个只有高度的view，键盘收起隐藏就好了
相关问答
Q1: Flutter WebView安卓端输入框不能长按粘贴
Flutter项目中遇到在安卓端，输入框不能长按粘贴，其它像iOS端、浏览器功能都是正常的。查询各种资料，部分说是官方为了避免手势冲突禁用了长按粘贴功能。各种查资料、各种尝试都开启不了这一功能，而项目紧急那只能曲线救国了。
第一个方案：
因为h5复制文本内容到剪贴板这块是没问题的，那么h5是否可以直接获取剪贴板中的内容直接填写到输入框中，然而...，居然获取不到，说啥子只有在IE浏览器中才管用。
第二个方案(最终方案)：
h5获取不到，但原生端不是可以的吗。最终流程，h5端输入框开始编辑，去调用原生端方法，告知需要获取剪贴板内容，原生端获取剪贴板内容调用h5端方法同时传值给h5端，最后输入框中不就有值了吗。
Q2: FlutterWeb 和 WebView 原生交互调用
需要创建两个工程，一个是FlutterWeb工程最终打包成Web页面，一个是Flutter原生工程承载一个WebView用来加载Web页面。这样做的好处在于只需要一种语言开发iOS和Android不用对接两次，可以直接使用社区Flutter原生工程的插件，只需要封装给Web调用。
FlutterWeb工程pubspec.yaml添加依赖
Flutter原生工程pubspec.yaml添加依赖
创建一个 toast_channel.dart，定义一个类实现 JavascriptChannel 重写name指定channel名称和onMessageReceived指定调用函数
在WebView的 javascriptChannels 配置上定义的Channel
创建一个 native_channel.dart ，定义一个外部函数通过 @JS("调用的channel和函数名") 注解指定调用的原生函数（JavascriptChannel固定名称为postMessage）
需要使用的地方直接调用
创建一个 js_function.dart，存放被原生调用的函数名称
将要提供给原生调用的函数，通过 js.context[原生调用名称] = 函数 开放给外部调用
如果在FlutterWeb工程要使用这个函数也可以使用@JS注解
WebView 创建时会回调 onWebViewCreated 获得 WebViewController ，WebViewController 调用 runJavascript 会执行JS函数无返回值，调用 runJavascriptReturningResult 会执行JS函数有返回值。
FutureBuilder获取WebViewController， 需要使用的地方直接调用
使用 HTML，CSS，Canvas 和 SVG 元素来渲染。
缺点：会存在不同平台效果不一样。
优点：不加载canvaskit默认使用系统字体，加载过程没有多余开销。
需要用到wasm，WebAssembly 要求需要浏览器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。
缺点：canvaskit 有7m大默认地址在国外首次加载耗时；中文会加载字体库默认地址在国外加载慢。
优点：性能更好，渲染效果一致。
--web-renderer=auto 默认移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
综上所诉推荐移动端使用HTML渲染更合适，在编译和打包时指定渲染器 --web-renderer=html 。
--debug 模式构建的 Web 应用没有被压缩，且 Tree-shaking 没有执行。
--profile 模式构建的 Web 应用没有被压缩，但 Tree-shaking 执行了。
--release 模式构建的 Web 应用被压缩了，并且 Tree-shaking 执行了
运行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
Q3: flutter webwiew销毁时间
在Widget销毁之前将WebView的监听和view销毁掉。
flutter生命周期大体上可以分为三个阶段：初始化、状态变化、销毁。
1、初始化阶段
对应执行构造方法和initState时候2、状态变化阶段
开新的widget或者调用setState方法的时候
3、销毁阶段
deactivate和dispose
二、生命周期阶段执行的函数
1、initState调用次数：1次
插入渲染树时调用，只调用一次，widget创建执行的第一个方法，这里可以做一些初始化工作，比如初始化State的变量。2、didChangeDependencies调用次数：多次
初始化时，在initState()之后立刻调用
当依赖的InheritedWidgetrebuild,会触发此接口被调用。实测在组件可见状态变化的时候会调用
3、build调用次数：多次初始化之后开始绘制界面。setState触发的时候会
4、didUpdateWidget调用次数：多次组件状态改变时候调用。
5、deactivate当State对象从树中被移除时，会调用此回调，会在dispose之前调用。页面销毁的时候会依次执行：deactivatedispose
6、dispose调用次数：1次当State对象从树中被永久移除时调用；通常在此回调中释放资源。
7、reassemble在热重载(hotreload)时会被调用，此回调在Release模式下永远不会被调用。
Q4: Flutter WebView加载本地html的问题
最近项目中，用到了flutter中的webview加载带有echarts控件的html文件，但是发现图表一直无法显示，通过查询相关资料，分析apk包文件，知道了是由于flutter项目中的文件打包后的路径发生变化，造成找不到相关依赖，特此记录一下，使用下面这个方法便可以解析出Android和IOS打包后的apk中资源文件的实际位置。
例如，你的资源文件是在flutter项目的根目录下的 'assets/files/echart-pie.html',
那 'getAssetsPath('assets/files/echart-pie.html')'才是打包成apk后，资源文件的实际路径。
按照上面的操作，你会发现在android设备上已经可以正常显示本地html页面了，但是IOS设备上还是一脸懵逼；不要慌，这块是由于webview_flutter本来就不支持加载本地文件，这时我们还需要修改下插件IOS部分的源码，FlutterWebView.m文件：
通过以上骚操作，就可以实现webview_flutter在android和ios设备上加载本地html文件了。
最后：推荐一个插件，已经在官方的基础上进行了优化
webview_flutter_plus
Q5: 九、Flutter之webview
Flutter的webview常用的第三方库有 flutter_webview_plugin 、 webview_flutter ，后者的文档较少，暂先学习flutter_webview_plugin。
添加依赖
导入包
iOS端info.plist配置，其中NSAppTransportSecurity节点是为了支持http协议
一个简单的demo
要监听链接跳转的话，实现onUrlChanged即可
添加依赖
导入包
iOS端info.plist配置
一个简单的demo
但是在webview里点击链接跳转的时候，测试机有时会跳转到系统浏览器上，并且点击文本框无法弹出键盘，交互性很弱。
二者共同的缺点是与javascript难以交互，目前只能实现Flutter-JS传递信息，还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持，比如拨号和调用摄像头等，期待后续完善。
flutter的webvie的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter的webview、flutter的webvie的信息别忘了在本站进行查找喔。
