Android webview_flutter插件的优化与完善

2022-06-05 05:33:57

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中显示的奥秘：
Android webview_flutter插件的优化与完善
解决办法，没有好的办法，不能直接解决，可以曲线搞定，
我的方案是 在项目中封装一层自己的 webview widget ， 称之为 progress_webveiw
重点在于，默认页面加载的时候 使用进度页面 来覆盖住webview，直到页面加载完成，这样就可以规避webview的黑屏问题
大致的代码可参照下图：
Android webview_flutter插件的优化与完善

默认错误页面显示、注入自定义字体

  1. 错误页面的显示，需要dart和Java层同时处理，否则容易看到 webview默认的丑丑的错误页面，但是个人觉得webview默认的丑丑的错误页 显示出来也不是啥问题，奈何产品非得要脸…
    flutter 层就是封装的progress_webveiw，加载中，加载出错都是用 placehoder 层遮罩处理。
    但是在重新加载的时候setState 的一瞬间还是可以看到 webview默认的丑丑的错误页，这就需要插件的Java层也处理一下了
    2.关于 注入自定义字体 我们的方案仍是通过原生注入， 测试对别在flutter中注入的时候 感觉效率有点低，页面会有二次刷字体的感觉，放到原生则相对好一些，可能是io读写字体文件的效率不一样或者是 flutter 中读写的时候会影像主线程的绘制
    我们注入字体的精髓如下：
    Android webview_flutter插件的优化与完善

    Android webview_flutter插件的优化与完善

补充

可能大家会发现 视频退出全屏的时候 页面会回到顶部，
这块我们也遇到了，解决方案不是特比好，就是 记录页面位置，在页面退出全屏回来的时候让webview从新回到之前的位置
大致的code可参考：
Android webview_flutter插件的优化与完善

整个修改后的插件 我暂时整理了一部分出来托管到了 gitee上，后续完善了之后会推到github上

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

Android webview_flutter插件的优化与完善

上一篇：yb课堂 基于浏览器和node.js的http客户端Axios 《三十四》


下一篇：SpringBoot获取ApplicationContext，再获取bean的名称