移動端如何監聽滾動事件
WebView
與
JS
互相呼叫是一個剛需，作為Android開發者，我們都知道在手機中內建了一款高效能 webkit 核心瀏覽器，在 SDK 中封裝為一個叫做 WebView 元件。今天就為大家講講Flutter中WebView的詳細使用方法，
手機
開始之前先簡單瞭解一下官方
WebView
所包含的
API
：
onWebViewCreated
：在WebView建立完成後呼叫，只會被呼叫一次；
initialUrl
：初始load的url；
javascriptMode
：JS執行模式（是否允許JS執行）；
javascriptChannels
：JS和Flutter通訊的Channel；
navigationDelegate
：路由委託（可以透過在此處攔截url實現JS呼叫Flutter部分）；
gestureRecognizers
：手勢監聽；
onPageFinished
：WebView載入完畢時的回撥。
本頭條核心宗旨
歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新訊息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支援，維護不易，歡迎關注。
技術剛剛好經歷
近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！
本文核心要點
Flutter 的 WebView 出現已經有一段時間了，在 Flutter 外掛社群官網搜尋 WebView 即可搜尋到比較流行的外掛，如下圖所示：
WebView
其中
webview_flutter
是官方維護的 WebView 外掛，特性是基於原生和 Flutter SDK 封裝，繼承 StatefulWidget，因此支援內嵌於 flutter Widget 樹中，這是比較靈活的；
flutter_webview_plugin
則是基於原生 WebView 封裝的 Flutter 外掛，將原生的一些基本使用 API 封裝好提供給 Flutter 呼叫，因此並不能內嵌於 Flutter Widget 樹中，因此在介面的跳轉必須得先釋放掉，返回後又要重新初始化，所以顯示會有很多限制性；
interactive_webview
則是基於 webview_flutter 封裝的 Flutter 外掛，因此原理特性上基本與官方 WebView 一致的；
而本文采用的是Flutter官方WebView
外掛，
Flutter官方WebView
提供WebView小部件的Flutter外掛。在iOS上，WebView小部件由WKWebView支援； 在Android上，WebView小部件由WebView支援。
開發人員預覽狀態＃
該外掛依賴Flutter的新機制來嵌入Android和iOS檢視。由於該機制當前處於開發人員預覽中，因此該外掛也應被視為開發人員預覽。已知問題使用平臺檢視和/或Web 檢視標籤標記。要在iOS上使用此外掛，您需要透過Info。plist使用鍵io。flutter。embedded_views_preview 和value 將boolean屬性新增到應用程式的檔案中，選擇加入嵌入式檢視預覽YES。
在您的
pubspec.yaml
檔案中新增
webview_flutter
為依賴項。
怎麼使用和執行
執行也是簡單，直接new一個WebviewScaffold，然後給個載入地址就OK了。
new MaterialApp（ routes： { “/”： （_） => new WebviewScaffold（ url： “https：//www。google。com”， appBar： new AppBar（ title： new Text（“Widget webview”）， ）， ）， }， ）；
可選引數hidden和initialChild可用，以便您在等待頁面載入時可以顯示其他內容。 如果將hidden設定為true，它將顯示預設的CircularProgressIndicator。 如果您還為initialChild指定了一個小部件，則可以讓它顯示直到頁面載入為止的任何內容。
return new MaterialApp（ title： ‘Flutter WebView Demo’， theme： new ThemeData（ primarySwatch： Colors。blue， ）， routes： { ‘/’： （_） => const MyHomePage（title： ‘Flutter WebView Demo’）， ‘/widget’： （_） => new WebviewScaffold（ url： selectedUrl， appBar： new AppBar（ title： const Text（‘Widget webview’）， ）， withZoom： true， withLocalStorage： true， hidden： true， initialChild： Container（ color： Colors。redAccent， child： const Center（ child： Text（‘Waiting。。。。。’）， ）， ）， ）， }，）；
FlutterWebviewPlugin提供了連結到一個唯一Webview的單例例項，因此您可以從應用程式中的任何位置控制Webview
然後你可以監聽他
final flutterWebviewPlugin = new FlutterWebviewPlugin（）；flutterWebviewPlugin。onUrlChanged。listen（（String url） {}）；
你也可以在webView裡面監聽滾動事件
注意：請注意，
ios和android之間的滾動距離略有不同
。 Android滾動值的差異往往大於ios裝置。
final flutterWebviewPlugin = new FlutterWebviewPlugin（）；flutterWebviewPlugin。onScrollYChanged。listen（（double offsetY） { // latest offset value in vertical scroll // compare vertical scroll changes here with old value}）；flutterWebviewPlugin。onScrollXChanged。listen（（double offsetX） { // latest offset value in horizontal scroll // compare horizontal scroll changes here with old value}）；
關閉webview的方法
flutterWebviewPlugin。close（）；總結
這篇文章算是一個簡單的介紹吧，也是一種方法，如果你專案正好需要接入，這篇文章算是一個啟發，也可以按照這個思路去做。
謝謝觀看技術剛剛好的文章，技術剛剛好是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新訊息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支援，維護不易，歡迎關注。