一序调、展示W(wǎng)ebView（URL）
1涣仿、首先在pubspec.yaml文件中添加webview_flutter:這個三方庫赦颇。
2咏闪、在.dart文件里導(dǎo)入所需文件名
import 'package:webview_flutter/webview_flutter.dart';
3曙搬、在initState方法里初始化controller（WebviewPageWithURL是我創(chuàng)建的用于接收URL來展示的網(wǎng)頁類）
webView通過WebViewController來控制網(wǎng)頁功能。
4、創(chuàng)建WebViewWidget
5纵装、在需要展示webview的地方征讲，調(diào)用getContentWebView()就可以了。
二橡娄、展示W(wǎng)ebView（HTML）
上述代碼都不變诗箍，只需要將..loadRequest()方法替換為..loadHtmlString()，并且把里面的代碼改成html字符串就行了挽唉。
三扳还、flutter中與WebView交互
1、flutter讀取H5內(nèi)容：
（1）H5通過URL向flutter傳遞數(shù)據(jù)（通過setNavigationDelegate的NavigationDelegate）
（2）通過定義特殊字段傳遞數(shù)據(jù)（通過添加JavaScriptChannel）
H5中的定義：
keyButton.addEventListener('click', function () {
? ? ?//通過注冊的key channel向flutter發(fā)送消息
? ? ?key.postMessage("value");
}, false)
2橱夭、flutter向H5傳遞數(shù)據(jù)
（1）拼接Url
（2）使用runJavaScript方法傳遞
（比如點擊flutter中一個按鈕，調(diào)用sendMessageToH5()方法桑逝，在這方法里執(zhí)行JS代碼）
H5中設(shè)置
<script type="text/javascript">
? ? function getParams(params) {
? ? ? ?document.getElementById('result').innerHTML = 'flutter傳遞的數(shù)據(jù)：' + params;
? ? }
? ? function getParamsCallBack(value) {
? ? ? return '處理結(jié)果'+value;
? ? }
</script>
?? 通常我們會有點擊空白處收起鍵盤的需求棘劣，實現(xiàn)代碼是在main函數(shù)里添加以下代碼
?// 全局 點擊空白區(qū)域 收起鍵盤
return GestureDetector(
? ? ? ? onTap: () {
? ? ? ? ? FocusScopeNode currentFocus = FocusScope.of(context);
? ? ? ? ? if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
? ? ? ? ? ? FocusManager.instance.primaryFocus?.unfocus();
? ? ? ? ? }
? ? ? ? },
? ? ? ? onPanDown: (details) {
? ? ? ? ? FocusScopeNode currentFocus = FocusScope.of(context);
? ? ? ? ? if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
? ? ? ? ? ? FocusManager.instance.primaryFocus?.unfocus();
? ? ? ? ? }
? ? ? ? },
? ? ? ? child: GetMaterialApp(
? ? ? ? ? ?//讨永。煌抒。嘱巾。笼恰。楞艾。便瑟。
? ? );
? }
但在實際操作中历造，有時因為一些設(shè)置導(dǎo)致WebView無法滾動直秆，原因是這個onPanDown手勢處理把WebView的滾動手勢也處理了预鬓，導(dǎo)致不響應(yīng)巧骚。為了解決問題，需要去掉onPanDown這個處理器格二，并且設(shè)置behavior屬性劈彪。這樣依然可以保持點擊空白部分收起鍵盤的功能。
?//全局 點擊空白位置隱藏鍵盤
GestureDetector(
? ? ? ? behavior: HitTestBehavior.translucent,//更精準(zhǔn)地識別手勢
? ? ? ? onTap: () {
? ? ? ? ? FocusScopeNode currentFocus = FocusScope.of(context);
? ? ? ? ? if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
? ? ? ? ? ? FocusManager.instance.primaryFocus?.unfocus();
? ? ? ? ? }
? ? ? ? },
? ? ? ? child: GetMaterialApp(
? ? ? ? ? ? ? ? ?//......
? ? ? ? ? )
);
顶猜。
