2. 程式人生 > 實用技巧 >Android webview_flutter外掛的優化與完善

Android webview_flutter外掛的優化與完善

阿新 • • 發佈：2020-07-19

Android webview_flutter外掛的優化與完善

Android webview_flutter 官方最新版本外掛存在的問題：

在我們專案開發過程中使用webview_flutter的時候主要遇到了以下問題：

  1. 長按 選擇、全選、複製 無法正常使用
  2. 視訊播放無法全屏，前後臺切換無法停止、繼續播放，按物理鍵返回的時候無法退出全屏
  3. 無法支援前端定位
  4. 不支援檔案選擇
  5. 不能使用select標籤
  6. 首次載入webview會顯示黑屏
  7. 預設錯誤頁面顯示、注入自定義字型
  8. 密碼輸入在Android 10的部分機型上無法正常使用，鍵盤出不來或崩潰

前面7個都已經解決了， 第八個仍然沒有好的方案，只做到了規避崩潰，前面7個的解決方案我分享給大家，有需要的可以自取。

第八個希望能與大家交流歡迎指教。
密碼的問題分支得出的原因是國內 手機的 安全密碼鍵盤導致的失焦問題
感興趣的可關注一下issue：
https://github.com/flutter/flutter/issues/21911
https://github.com/flutter/flutter/issues/19718
https://github.com/flutter/flutter/issues/58943
和 libo1223同學一直探討方案，最接近解決的方案是巢狀一層SingleChildScrollView，但是仍不是完美的解決方案，仍然會有問題

前面幾個問題的解決方法

長按 選擇、全選、複製 無法正常使用

這塊問題很早發現了，大家也都提出了 issue 比如：

https://github.com/flutter/flutter/issues/37163
https://github.com/flutter/flutter/issues/24584
https://github.com/flutter/flutter/issues/24585

其中yenole給出瞭解決方案https://github.com/yenole/plugins，我這裡解決此問題也是按照他的方案實現的，目前標籤還基本正常，部分裝置小概率會引起UI異常，但總體是可以的
具體實現步驟：

  1. 重寫外掛中 InputAwareWebView 的 startActionMode方法，原生自定義長按操作框
    InputAwareWebView中的關鍵code：

    1. 　　 private MotionEvent ev;

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
    this.ev = ev;
    return super.dispatchTouchEvent(ev);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
      //手勢攔截，取消之前的彈框
    if (event.getAction() == MotionEvent.ACTION_DOWN && floatingActionView != null) {
      this.removeView(floatingActionView);
      floatingActionView = null;
    }
    return super.onTouchEvent(event);
  }

  @Override
  public ActionMode startActionMode(ActionMode.Callback callback) {
    return rebuildActionMode(super.startActionMode(callback), callback);
  }

  @Override
  public ActionMode startActionMode(ActionMode.Callback callback, int type) {
    return rebuildActionMode(super.startActionMode(callback, type), callback);
  }

  private LinearLayout floatingActionView;

  /** 自定義長按彈框 */
  private ActionMode rebuildActionMode(
          final ActionMode actionMode, final ActionMode.Callback callback) {
    if (floatingActionView != null) {
      this.removeView(floatingActionView);
      floatingActionView = null;
    }
    floatingActionView =
            (LinearLayout)
                    LayoutInflater.from(getContext()).inflate(R.layout.floating_action_mode, null);
    for (int i = 0; i < actionMode.getMenu().size(); i++) {
      final MenuItem menu = actionMode.getMenu().getItem(i);
      TextView text =
              (TextView)
                      LayoutInflater.from(getContext()).inflate(R.layout.floating_action_mode_item, null);
      text.setText(menu.getTitle());
      floatingActionView.addView(text);
      text.setOnClickListener(
              new OnClickListener() {
                @Override
                public void onClick(View view) {
                  InputAwareWebView.this.removeView(floatingActionView);
                  floatingActionView = null;
                  callback.onActionItemClicked(actionMode, menu);
                }
              });
      // supports up to 4 options
      if (i >= 4) break;
    }

    final int x = (int) ev.getX();
    final int y = (int) ev.getY();
    floatingActionView
            .getViewTreeObserver()
            .addOnGlobalLayoutListener(
                    new ViewTreeObserver.OnGlobalLayoutListener() {
                      @Override
                      public void onGlobalLayout() {
                        if (Build.VERSION.SDK_INT >= 16) {
                          floatingActionView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                        } else {
                          floatingActionView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                        }
                        onFloatingActionGlobalLayout(x, y);
                      }
                    });
    this.addView(floatingActionView, new AbsoluteLayout.LayoutParams(-2, -2, x, y));
    actionMode.getMenu().clear();
    return actionMode;
  }

  /** 定位長按彈框的位置 */
  private void onFloatingActionGlobalLayout(int x, int y) {
    int maxWidth = InputAwareWebView.this.getWidth();
    int maxHeight = InputAwareWebView.this.getHeight();
    int width = floatingActionView.getWidth();
    int height = floatingActionView.getHeight();
    int curx = x - width / 2;
    if (curx < 0) {
      curx = 0;
    } else if (curx + width > maxWidth) {
      curx = maxWidth - width;
    }
    int cury = y + 10;
    if (cury + height > maxHeight) {
      cury = y - height - 10;
    }

    InputAwareWebView.this.updateViewLayout(
            floatingActionView,
            new AbsoluteLayout.LayoutParams(-2, -2, curx, cury + InputAwareWebView.this.getScrollY()));
    floatingActionView.setAlpha(1);
  }

  2. webview 的手勢識別給到最大的EagerGestureRecognizer 否則會出現無法識別長按手機的問題
    在使用webview_flutter 的地方或者直接擴充套件到外掛裡的 AndroidWebView 中：

    gestureRecognizers:
            Platform.isAndroid ? (Set()..add(Factory<EagerGestureRecognizer>(() => EagerGestureRecognizer()))) : null,

視訊播放無法全屏，前後臺切換無法停止、繼續播放，按物理鍵返回的時候無法退出全屏 以及無法定位

  1. 關於不能全屏、無法定位
    這塊應該是和原生中初始的webview一致，預設不支援視訊全屏，解決辦法與原生中擴充套件類似
    FlutterWebView內新增自定義的WebChromeClient ，關鍵code:

    1. class CustomWebChromeClient extends WebChromeClient {
        View myVideoView;
        CustomViewCallback callback;
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }
        @Override
        public void onShowCustomView(View view, CustomViewCallback customViewCallback) {
            webView.setVisibility(View.GONE);
            ViewGroup rootView = mActivity.findViewById(android.R.id.content);
            rootView.addView(view);
            myVideoView = view;
            callback = customViewCallback;
            isFullScreen = true;
        }

        @Override
        public void onHideCustomView() {
            if (callback != null) {
                callback.onCustomViewHidden();
                callback = null;
            }
            if (myVideoView != null) {
                ViewGroup rootView = mActivity.findViewById(android.R.id.content);
                rootView.removeView(myVideoView);
                myVideoView = null;
                webView.setVisibility(View.VISIBLE);
            }
            isFullScreen = false;
        }
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            Log.i("test", "openFileChooser");
            FlutterWebView.this.uploadFile = uploadMsg;
            openFileChooseProcess();
        }

        public void openFileChooser(ValueCallback<Uri> uploadMsgs) {
            Log.i("test", "openFileChooser 2");
            FlutterWebView.this.uploadFile = uploadMsgs;
            openFileChooseProcess();
        }

        // For Android  > 4.1.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            Log.i("test", "openFileChooser 3");
            FlutterWebView.this.uploadFile = uploadMsg;
            openFileChooseProcess();
        }

        public boolean onShowFileChooser(WebView webView,
                                         ValueCallback<Uri[]> filePathCallback,
                                         WebChromeClient.FileChooserParams fileChooserParams) {
            Log.i("test", "openFileChooser 4:" + filePathCallback.toString());
            FlutterWebView.this.uploadFiles = filePathCallback;
            openFileChooseProcess();
            return true;
        }

        private void openFileChooseProcess() {
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            mActivity.startActivityForResult(Intent.createChooser(i, "test"), 1303);
        }

        @Override
        public Bitmap getDefaultVideoPoster() {
            return Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);
        }
    }


  2. 按物理鍵返回的時候無法退出全屏，前後臺切換無法停止、繼續播放
    按物理鍵返回的時候無法退出全屏，這塊主要是因為屋裡返回鍵在flutter中，被flutter捕獲消耗了，解決方案，webview 外掛攔截物理返回鍵，自定義退出全屏的方法，呼叫
    關鍵code如下：
    FlutterWebView :

    1. private void exitFullScreen(Result result) {
        if (isFullScreen && Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            if ((null != (webView.getWebChromeClient()))) {
                (webView.getWebChromeClient()).onHideCustomView();
                result.success(false);
                return;
            }
        }
        result.success(true);
    }

    在互動方法 onMethodCall 中擴充套件 exitFullScreen 方法

    1. case "exitFullScreen":
    2. exitFullScreen(result);
    3. break;

    給 controller 擴充套件 exitFullScreen 方法 code 略

    在 webView_flutter.dart的Webview中修改build方法，
    關鍵code:

    1. @override
  Widget build(BuildContext context) {
    Widget _webview = WebView.platform.build(
      context: context,
      onWebViewPlatformCreated: _onWebViewPlatformCreated,
      webViewPlatformCallbacksHandler: _platformCallbacksHandler,
      gestureRecognizers: widget.gestureRecognizers,
      creationParams: _creationParamsfromWidget(widget),
    );

    if (Platform.isAndroid) {
      return WillPopScope(
        child: _webview,
        onWillPop: () async {
          try {
            var controller = await _controller.future;
            if (null != controller) {
              return await controller.exitFullScreen();
            }
          } catch (e) {}
          return true;
        },
      );
    }
    return _webview;
  }

  3. 前後臺切換無法停止、繼續播放
    前後臺切換無法暫停、繼續播放視訊，主要是因為 webview_flutter 感知不到應用前後臺的切換，這塊的解決方案是 外掛擴充套件對前後臺的監聽，主動呼叫 webview 的暫停和繼續播放的方法
    這裡需要引入flutter_plugin_android_lifecycle外掛，用來監聽應用的宣告週期：
    引入方式 yaml檔案中新增 flutter_plugin_android_lifecycle: ^1.0.6
    之後再 WebViewFlutterPlugin 檔案擴充套件宣告週期的監聽，關鍵code如下：

    1. @Override
    public void onAttachedToActivity(@NonNull ActivityPluginBinding binding) {
        BinaryMessenger messenger = mBinding.getBinaryMessenger();
        //關注一下這裡的空的問題
        final WebViewFactory factory = new WebViewFactory(messenger, /*containerView=*/ null, binding.getActivity());
        mBinding.getPlatformViewRegistry()
                .registerViewFactory(
                        "plugins.flutter.io/webview", factory);
        flutterCookieManager = new FlutterCookieManager(messenger);
        Lifecycle lifeCycle = FlutterLifecycleAdapter.getActivityLifecycle(binding);
        lifeCycle.addObserver(new DefaultLifecycleObserver() {
            @Override
            public void onPause(@NonNull LifecycleOwner owner) {
                factory.onPause();
            }

            @Override
            public void onResume(@NonNull LifecycleOwner owner) {
                factory.onResume();
            }

            @Override
            public void onDestroy(@NonNull LifecycleOwner owner) {
            }

            @Override
            public void onCreate(@NonNull LifecycleOwner owner) {
            }

            @Override
            public void onStop(@NonNull LifecycleOwner owner) {

            }

            @Override
            public void onStart(@NonNull LifecycleOwner owner) {

            }
        });
    }


    WebViewFactory中擴充套件onPause，onResume 方法，用來下傳應用的前後臺切換事件：
    WebViewFactory 中關鍵code:

    1. public PlatformView create(Context context, int id, Object args) {
        Map<String, Object> params = (Map<String, Object>) args;
        flutterWebView = new FlutterWebView(context, messenger, id, params, containerView, mActivity);
        return flutterWebView;
    }
public void onPause() {
        if (null != flutterWebView && null != flutterWebView.webView) {
            flutterWebView.webView.onPause();
        }
    }
public void onResume() {
        if (null != flutterWebView && null != flutterWebView.webView) {
            flutterWebView.webView.onResume();
        }
    }

不支援檔案選擇

  1. 同樣需要自定義WebChromeClient，擴充套件檔案選擇的方法，參照CustomWebChromeClient中的openFilexxx 方法，主要使用intent 開啟檔案選擇

  2. 重點是獲取 intent 傳遞回來的資料， 使用webview_flutter 外掛的地方dart中無法直接像在android中那樣，重寫Activity的onActivityResult方法，好在 ActivityPluginBinding 中可以注入ActivityResult監聽，這樣我們就能直接在外掛中處理了。
    WebViewFlutterPlugin 關鍵code如下：

    1. public void onAttachedToActivity(@NonNull ActivityPluginBinding binding) {
        BinaryMessenger messenger = mBinding.getBinaryMessenger();
        //關注一下這裡的空的問題
        final WebViewFactory factory = new WebViewFactory(messenger, /*containerView=*/ null, binding.getActivity());
        mBinding.getPlatformViewRegistry().registerViewFactory("plugins.flutter.io/webview", factory);

        binding.addActivityResultListener(factory);

    }

    binding.addActivityResultListener(factory); 即為重點，
    WebViewFactory 需要實現 PluginRegistry.ActivityResultListener 介面，
    並重寫onActivityResult方法，把我們選擇的資料傳遞給 webview，FlutterWebView需要擴充套件onActivityResult方法
    WebViewFactory 關鍵code:

    1. @Override
    public boolean onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == 1303) {
            flutterWebView.onActivityResult(requestCode, resultCode, data);
            return true;
        }
        return false;
    }

    FlutterWebView需要擴充套件onActivityResult方法

    1. public void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (resultCode == Activity.RESULT_OK) {
            switch (requestCode) {
                case 1303:
                    if (null != uploadFile) {
                        Uri result = data == null || resultCode != Activity.RESULT_OK ? null
                                : data.getData();
                        uploadFile.onReceiveValue(result);
                        uploadFile = null;
                    }
                    if (null != uploadFiles) {
                        Uri result = data == null || resultCode != Activity.RESULT_OK ? null
                                : data.getData();
                        uploadFiles.onReceiveValue(new Uri[]{result});
                        uploadFiles = null;
                    }
                    break;
                default:
                    break;
            }
        } else {
            if (null != uploadFile) {
                uploadFile.onReceiveValue(null);
                uploadFile = null;
            }
            if (null != uploadFiles) {
                uploadFiles.onReceiveValue(null);
                uploadFiles = null;
            }
        }
    }

不能使用select標籤

不能使用select標籤 是引起外掛中webview構造的時候傳遞的是 Context不是Activity 在展示Dialog的時候出現了異常， 修改方法也就是將webview的時候傳遞Activity進去 ，關鍵code 略

初次載入webview會顯示黑屏

這塊可能是繪製的問題，檢視flutter中的AndroidView程式碼追蹤可最終發現 外掛view在flutter中顯示的奧祕：

解決辦法，沒有好的辦法，不能直接解決，可以曲線搞定，
我的方案是 在專案中封裝一層自己的 webview widget ， 稱之為 progress_webveiw
重點在於，預設頁面載入的時候 使用進度頁面 來覆蓋住webview，直到頁面載入完成，這樣就可以規避webview的黑屏問題
大致的程式碼可參照下圖：

預設錯誤頁面顯示、注入自定義字型

  1. 錯誤頁面的顯示，需要dart和Java層同時處理，否則容易看到 webview預設的醜醜的錯誤頁面，但是個人覺得webview預設的醜醜的錯誤頁 顯示出來也不是啥問題，奈何產品非得要臉…
    flutter 層就是封裝的progress_webveiw，載入中，加載出錯都是用 placehoder 層遮罩處理。
    但是在重新載入的時候setState 的一瞬間還是可以看到 webview預設的醜醜的錯誤頁，這就需要外掛的Java層也處理一下了
    2.關於 注入自定義字型 我們的方案仍是通過原生注入， 測試對別在flutter中注入的時候 感覺效率有點低，頁面會有二次刷字型的感覺，放到原生則相對好一些，可能是io讀寫字型檔案的效率不一樣或者是 flutter 中讀寫的時候會影像主執行緒的繪製
    我們注入字型的精髓如下：

補充

可能大家會發現 視訊退出全屏的時候 頁面會回到頂部，
這塊我們也遇到了，解決方案不是特比好，就是 記錄頁面位置，在頁面退出全屏回來的時候讓webview從新回到之前的位置
大致的code可參考：

整個修改後的外掛 我暫時整理了一部分出來託管到了 gitee上，後續完善了之後會推到github上

地址：https://gitee.com/Mauiie/webview_flutter

相關推薦

Android webview_flutter外掛的優化與完善

Android webview_flutter外掛的優化與完善 Android webview_flutter 官方最新版本外掛存在的問題：

Android Gradle 外掛版本與Gradle版本對應

Android Gradle 外掛版本說明 原：https://developer.android.google.cn/studio/releases/gradle-plugin.html#updating-plugin

Android:gradle 外掛版本號與gradle 版本號對應關係

gradle資料夾 - gradle-wrapper.properties 中指的是gradle版本號 build.gradle檔案 - classpath ‘com.android.tools.build:gradle:3.1.2’ 指的是 gradle 外掛的版本號，而不是 gradle 的版本號。

Android 外掛化與反射機制

一、反射機制定義 　　Java反射機制就是在程式執行狀態中，對於任意一個類，都能知道這個類的所有的屬性和方法；對於任意一個物件，都能任意的呼叫物件中屬性和方法；這種動態獲取類資訊以及動態呼叫物件中任意的屬

Android效能全面分析與優化方案研究-教科書級總結

前言 對於如今的Android開發者來說，效能優化是開發者們一定要掌握的開發技能。流暢度和使用體驗很大程度上影響著產品在市場表現中的命脈。而且現在招聘要求上，各大廠也是對精通效能優化的開發者求賢若渴。

Android Canvas的drawText()與文字居中方案詳解

自定義View是繪製文字有三類方法 // 第一類 public void drawText (String text,float x,float y,Paint paint)

小米正式開源 SQL 智慧優化與改寫工具 SOAR

近日，小米正式宣佈開源 SOAR。 截至今日，該專案已經獲得了 350 個「star」以及 44 個「fork」（GitHub專案地址：https://github.com/XiaoMi/soar）

Android Webview的postUrl與loadUrl載入頁面例項

關於Android的webview，用過的想必都不會陌生。這裡我就不說webview的基本用法了，想要知道的可以去網上百多，有很多介紹webview基本用法的。

Android Studio 外掛 ADBWifi 無線除錯真機

長話短說，步驟如下 Android Studio 安裝外掛ADB Wifi。這一步可以選擇AS->Settings->Plugins->Market搜尋；或者可以選擇去外掛官網下載外掛檔案然後AS->Settings->Plugins->Install from Disk安裝

iOS應用千萬級架構：效能優化與卡頓監控

CPU和GPU 在螢幕成像的過程中，CPU和GPU起著至關重要的作用 CPU（Central Processing Unit，中央處理器） 物件的建立和銷燬、物件屬性的調整、佈局計算、文字的計算和排版、圖片的格式轉換和解碼、影象的繪製（Core

iOS應用千萬級架構：效能優化與卡頓監控（轉載）

CPU和GPU 在螢幕成像的過程中，CPU和GPU起著至關重要的作用 CPU（Central Processing Unit，中央處理器） 物件的建立和銷燬、物件屬性的調整、佈局計算、文字的計算和排版、圖片的格式轉換和解碼、影象的繪製（Core

K8s網路外掛flannel與calico

Kubernetes的網路通訊問題:　　1. 容器間通訊： 即同一個Pod內多個容器間通訊，通常使用loopback來實現。　　2. Pod間通訊： K8s要求,Pod和Pod之間通訊必須使用Pod-IP 直接訪問另一個Pod-IP　　3. Pod與Ser

CentOS7基礎優化與常用配置

最小化全新安裝CentOS7基礎優化 配置yum源 mkdir -p /tmp/repo-bak mv /etc/yum.repos.d/* /tmp/repo-bak/

mybatis的屬性優化與別名優化

在使用mybatis框架時，會發現幾個比較麻煩的問題： 例如在mybatis-config.xml配置檔案中的程式碼

Nginx安全優化與效能調優

目錄Nginx基本安全優化隱藏Nginx軟體版本號資訊更改原始碼隱藏Nginx軟體名及版本號修改Nginx服務的預設使用者修改引數優化Nginx服務效能優化Nginx服務的worker程序數1.優化NGINX程序對應的配置2.優化Nginx程序個數的

遞迴優化與動態規劃

遞迴淺談 談及遞迴問題，大家第一印象肯定是漢諾塔問題或者斐波那契數列問題，當然了，如果你是一位LeetCode愛好者，肯定遇到了許多遞迴問題或者遞迴的變形問題。遞迴問題的求解主要是把一個大問題分解為子問題，但在

《深入應用C++11--程式碼優化與工程級應用》——第8章：使用C++改進我們的模式（命令模式）

8.4 改進命令模式 (原創)c++11改進我們的模式之改進命令模式 https://blog.csdn.net/zang141588761/article/details/85679847

程式碼優化與sql優化---未完待續

　　萬丈高樓平地起，還是得打一個好地基呀 減少對變數對重複計算 //一般這麼寫

MyBatis Plus外掛機制與執行流程原理分析詳解

MyBatis Plus外掛 MyBatis Plus提供了分頁外掛PaginationInterceptor、執行分析外掛SqlExplainInterceptor、效能分析外掛PerformanceInterceptor以及樂觀鎖外掛OptimisticLockerInterceptor。

mybatis配置優化與增刪改查

mybatis小結 mybatis配置優化 mybatis-config.xml配置 <?xml version="1.0" encoding="gbK" ?>