我该如何给Flutter webview添加透明背景?

·  阅读 1493

前言:改个透明色也好意思发文章?难道是篇水文?😡 莫急,咱是个反标题党!
笔者当然知道给插件改个透明背景不值一提,毕竟Flutter目前的生态,轮子都经常得自己造,更别说改什么源码了。。。
但是通过这篇文章,你将会了解 如何魔改Flutter官方插件并自行维护,同时还能学到如何构建自己公司内部的插件库。

为何写这篇文章

承接以上前言,我之所以写这篇文章,是因为我改的是Flutter官方的插件webview_flutter。Flutter官方的插件,全部是在一个gitHub仓库上维护的,各个库之间又相互关联。【见下图】 Flutter官方插件库

所以改功能其实是其次,如何在这庞大的Flutter插件库里面单独修改你所需的插件,并且自行维护起来,这才是重点!!!我觉得是很有必要分享给大家的。

需求背景

这次改动的原因是Flutter webview的背景永远是白色,而我们的主题又是黑色的。这样H5嵌入的时候,需要H5的同事去设置黑色背景,同时网页还没加载出来时还会出现白色背景,体验极差。 如果能把webview的背景设置为透明,H5不需要设置背景色,从可维护性和体验都会有所提高,因此需求应运而生。

实现步骤

  1. 从github把plugin仓库clone下来,然后用Android studio单独打开webview文件夹,可以看到包含了三个Plugin。

2.png 2. 更改主插件依赖项

进入主插件webview目录,看到yaml依赖的还是pub上面的插件,所以我们改动其他目录下的源码,yaml根本就没有依赖到,是不会生效的。

flutter:
  plugin:
    platforms:
      android:
        default_package: webview_flutter_android
      ios:
        default_package: webview_flutter_wkwebview

dependencies:
  flutter:
    sdk: flutter
  webview_flutter_platform_interface: ^1.0.0
  webview_flutter_android: ^2.0.13
  webview_flutter_wkwebview: ^2.0.13
复制代码

所以我要先把yaml的依赖改为相对路径,这样我们对代码的改动才会生效。改完flutter pub get,跟着源码走下去,都能进入本地的源文件,good👍🏻 3.png

  1. 开始改代码

在webview的build方法中,可以看到通过WebView.platform.build传入构造的参数,然后判断平台返回对应视图。

/// webview_flutter/webview_flutter/lib/src/webview.dart
@override
  Widget build(BuildContext context) {
    return WebView.platform.build(
      context: context,
      onWebViewPlatformCreated: _onWebViewPlatformCreated,
      webViewPlatformCallbacksHandler: _platformCallbacksHandler,
      javascriptChannelRegistry: _javascriptChannelRegistry,
      gestureRecognizers: widget.gestureRecognizers,
      creationParams: _creationParamsfromWidget(widget),
    );
  }

  /// 根据设备类型返回对应的视图
  static WebViewPlatform get platform {
    if (_platform == null) {
      switch (defaultTargetPlatform) {
        case TargetPlatform.android:
          _platform = AndroidWebView();
          break;
        case TargetPlatform.iOS:
          _platform = CupertinoWebView();
          break;
        default:
          throw UnsupportedError(
              "Trying to use the default webview implementation for $defaultTargetPlatform but there isn't a default one");
      }
    }
    return _platform!;
  }

/// 设置参数,这里我加多了一个transparentBackground参数,是bool类型的
CreationParams _creationParamsfromWidget(WebView widget) {
  return CreationParams(
    initialUrl: widget.initialUrl,
    webSettings: _webSettingsFromWidget(widget),
    javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),
    userAgent: widget.userAgent,
    autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,
    transparentBackground: widget.transparentBackground,
  );
}
复制代码

以Android为例,来到webview_flutter_android的webview_android.dart中。可以看到通过AndroidView引入原生视图,通过标识 'plugins.flutter.io/webview' 进行匹配。

/// webview_flutter/webview_flutter_android/lib/webview_android.dart
return GestureDetector(
      onLongPress: () {},
      excludeFromSemantics: true,
      child: AndroidView(
        viewType: 'plugins.flutter.io/webview',
        onPlatformViewCreated: (int id) {
          if (onWebViewPlatformCreated == null) {
            return;
          }
          onWebViewPlatformCreated(MethodChannelWebViewPlatform(
            id,
            webViewPlatformCallbacksHandler,
            javascriptChannelRegistry,
          ));
        },
        gestureRecognizers: gestureRecognizers,
        layoutDirection: Directionality.maybeOf(context) ?? TextDirection.rtl,
        creationParams:
            MethodChannelWebViewPlatform.creationParamsToMap(creationParams),
        creationParamsCodec: const StandardMessageCodec(),
      ),
    );
复制代码

之后进入android目录,找到对应的FlutterWebView文件,通过获取methodcCannel传入的params来判断是否需要启用透明背景,如果为true,则设置backgroundColor为透明。 wecom-temp-83ef5fa160fe25fafb861bd53bb2c344.png

Ps:这里可以看出,原生插件的编写很简单。只要通过methodChannel进行通信,Flutter层传入params,原生层获取参数后进行解析。注意数据传输都是转为字符串类型的,甚至很多时候都是用json字符串流转。
同时这里也返回了原生视图,通过PlatformView绑定标识,返回对应PlatformViewFactory的视图,标识同样也是字符串类型。
所以是非常傻瓜式的,Flutter只不过提供了一个通信桥梁来实现跨平台,原生代码还是得自己写,从这个角度来看,Flutter真的跨平台了吗?积极开源的社区对于Flutter而已,必要性何其重呢?值得我们深思!

ios端也一样,核心代码就是修改wkWebview的背景色为透明

/// webview_flutter/webview_flutter_wkwebview/ios/Classes/FlutterWebView.m
    NSNumber* transparentEnabled = args[@"transparentBackground"];
    NSLog(@"transparentBackground >>> %i", [transparentEnabled boolValue]);
    // 设置背景色为透明
    if([transparentEnabled boolValue]){
        NSLog(@"开始设置背景色");
        _webView.opaque = NO;
        _webView.backgroundColor = UIColor.clearColor;
    }
复制代码

重点:如何引入到项目中使用并且独立维护

功能实现完,要考虑如何引入到我们的项目中使用。以往个人开发的插件一般都是通过git仓库引入,所以我创建新的GitHub仓库,把改好的webview目录整个上传上去。加入项目中flutter pub get后惊喜的发现,失败了!
原因是:根目录下没有yaml文件,对于Flutter来说是一个不合格的Plugin。 所以我们需要指定插件的根目录,通过path来指定到webview文件夹下。

 # webview组件
  webview_flutter:
    git:
      url: git://github.com/~~~/webview_flutter_enable_transparent.git
      ref: main
      path: webview_flutter # 指定路径
复制代码

继续get,再次惊喜!!! 原因是:相对路径 ../XXXX 找不到对应的插件,这合理吗?
很合理,因为Flutter必须保证你的包是最小的,你既然指定了依赖的库,那我就只会下载对应的库,并不是整个git下载下来。所以我们用相对路径的时候,根本找不到根目录下其他的插件。
解决方法,webview的yaml文件中所依赖的插件也需要用git引入

dependencies:
  flutter:
    sdk: flutter
  webview_flutter_platform_interface:
    git:
      url: https://github.com/~~~/webview_flutter_enable_transparent.git
      ref: main
      path: webview_flutter_platform_interface
  webview_flutter_android:
    git:
      url: https://github.com/~~~/webview_flutter_enable_transparent.git
      ref: main
      path: webview_flutter_android
  webview_flutter_wkwebview:
    git:
      url: https://github.com/~~~/webview_flutter_enable_transparent.git
      ref: main
      path: webview_flutter_wkwebview
复制代码

再次get,运行起来了,非常完美!👌🏻

WebView(
  initialUrl: "xxxxx",
  javascriptMode: JavascriptMode.unrestricted,
  transparentBackground: true,
)
复制代码

写在最后

这次对于插件的更改,其实功能并不难。但是对于Flutter官方插件的更改,以及如果放到自己的git上进行维护,我认为这次确实让我学到了不少。 同理,自己公司的Plugin,是否用类似Flutter官方的插件管理方式来管理,会更加的合理? 笔者认为这是必须要的,赶紧创建一个仓库,按照上面的方式,组建内部插件库之旅吧!

我们一起学习、进步!!!

分类:
Android
分类:
Android