Android webview_flutter插件的优化与完善

Android webview_flutter 官方最新版本插件存在的问题：

在我们项目开发过程中使用webview_flutter的时候主要遇到了以下问题：

长按选择、全选、复制无法正常使用
视频播放无法全屏，前后台切换无法停止、继续播放，按物理键返回的时候无法退出全屏
无法支持前端定位
不支持文件选择
不能使用select标签
首次加载webview会显示黑屏
默认错误页面显示、注入自定义字体
密码输入在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异常，但总体是可以的
具体实现步骤：

重写插件中 InputAwareWebView 的 startActionMode方法，原生自定义长按操作框
InputAwareWebView中的关键code：

　　 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);
  }

webview 的手势识别给到最大的EagerGestureRecognizer 否则会出现无法识别长按手机的问题
在使用webview_flutter 的地方或者直接扩展到插件里的 AndroidWebView 中：
```
gestureRecognizers:
            Platform.isAndroid ? (Set()..add(Factory<EagerGestureRecognizer>(() => EagerGestureRecognizer()))) : null,
```

视频播放无法全屏，前后台切换无法停止、继续播放，按物理键返回的时候无法退出全屏以及无法定位

关于不能全屏、无法定位
这块应该是和原生中初始的webview一致，默认不支持视频全屏，解决办法与原生中扩展类似
FlutterWebView内添加自定义的WebChromeClient ，关键code:

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);
        }
    }

按物理键返回的时候无法退出全屏，前后台切换无法停止、继续播放
按物理键返回的时候无法退出全屏，这块主要是因为屋里返回键在flutter中，被flutter捕获消耗了，解决方案，webview 插件拦截物理返回键，自定义退出全屏的方法，调用
关键code如下：
FlutterWebView :

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 方法

case "exitFullScreen":
exitFullScreen(result);
break;

给 controller 扩展 exitFullScreen 方法 code 略

在 webView_flutter.dart的Webview中修改build方法，
关键code:

@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;
  }

前后台切换无法停止、继续播放
前后台切换无法暂停、继续播放视频，主要是因为 webview_flutter 感知不到应用前后台的切换，这块的解决方案是插件扩展对前后台的监听，主动调用 webview 的暂停和继续播放的方法
这里需要引入flutter_plugin_android_lifecycle插件，用来监听应用的声明周期：
引入方式 yaml文件中添加 flutter_plugin_android_lifecycle: ^1.0.6
之后再 WebViewFlutterPlugin 文件扩展声明周期的监听，关键code如下：

@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:

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();
        }
    }

不支持文件选择

同样需要自定义WebChromeClient，扩展文件选择的方法，参照CustomWebChromeClient中的openFilexxx 方法，主要使用intent 打开文件选择

重点是获取 intent 传递回来的数据，使用webview_flutter 插件的地方dart中无法直接像在android中那样，重写Activity的onActivityResult方法，好在 ActivityPluginBinding 中可以注入ActivityResult监听，这样我们就能直接在插件中处理了。
WebViewFlutterPlugin 关键code如下：

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:

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

FlutterWebView需要扩展onActivityResult方法

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的黑屏问题
大致的代码可参照下图：

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

错误页面的显示，需要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

posted @ 2020-07-19 13:12 Mauiie_娢阅读(3348) 评论(1) 编辑收藏举报

刷新页面返回顶部

Mauiie_娢

Android webview_flutter插件的优化与完善

Android webview_flutter插件的优化与完善

Android webview_flutter 官方最新版本插件存在的问题：

前面几个问题的解决方法

长按 选择、全选、复制 无法正常使用

视频播放无法全屏，前后台切换无法停止、继续播放，按物理键返回的时候无法退出全屏 以及无法定位

不支持文件选择

不能使用select标签

初次加载webview会显示黑屏

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

补充

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

公告

长按选择、全选、复制无法正常使用

视频播放无法全屏，前后台切换无法停止、继续播放，按物理键返回的时候无法退出全屏以及无法定位

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