Android 项目嵌入Flutter Module(二)

Lsfern
2,840 阅读5分钟

前言

上篇文章我们讲的是Android 混合Flutter项目的一些基本用法和设计源码的分析。可以看到基本上实现了功能，但是在启动Flutter的时候会有短暂的白屏、黑屏的现象。这篇文章我们就围绕这个点去深入讨论一下

Android 项目嵌入Flutter Module(一)

正文

首先我们看下重现场景

以下内容均在启动模式为RenderMode.surface（ RenderMode.texture后面会说到）

在分析Flutter Android端启动源码的时候，我们提到过FlutterActivity里有一个重写的方法叫做

provideSplashScreen

@Nullable
  @Override
  public SplashScreen provideSplashScreen() {
    Drawable manifestSplashDrawable = getSplashScreenFromManifest();
    if (manifestSplashDrawable != null) {
      return new DrawableSplashScreen(manifestSplashDrawable);
    } else {
      return null;
    }
  }
  
  private Drawable getSplashScreenFromManifest() {
    try {
      ActivityInfo activityInfo =
          getPackageManager().getActivityInfo(getComponentName(), PackageManager.GET_META_DATA);
      Bundle metadata = activityInfo.metaData;
      int splashScreenId = metadata != null ? metadata.getInt(SPLASH_SCREEN_META_DATA_KEY) : 0;
      return splashScreenId != 0
          ? Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP
              ? getResources().getDrawable(splashScreenId, getTheme())
              : getResources().getDrawable(splashScreenId)
          : null;
    } catch (PackageManager.NameNotFoundException e) {
      // This is never expected to happen.
      return null;
    }
  }

在Flutter纯项目中，是解决Android启动->Flutter启动时候的短暂白黑屏问题。

在Android 嵌入Flutter的项目中，是为了解决Flutter启动时的短暂白黑屏问题。

直至收到 绘制第一帧的回调时才会关闭。

它默认查找对应包名下清单文件中name为"io.flutter.embedding.android.SplashScreenDrawable"的meta-data，但是我们这是Flutter Module没有对应的清单文件，所以我们要新建一个类，让它去继承FlutterActivity，然后重写对应的方法进行展示

接下来我们重点分析一下这个类

class MyFlutterActivity : FlutterActivity() {
    override fun provideSplashScreen(): SplashScreen? {
        return DrawableSplashScreen(resources.getDrawable(R.drawable.loading))
    }
}

重新provideSplashScreen返回一个DrawableSplashScreen。

  startActivity(
  	Intent(root.context, MyFlutterActivity::class.java)
  )

可以看到通过一个loading页就可以解决白屏的问题(可能丑了些🤓)

接下来我们通过清单文件配置的方式来处理,我换一张启动图，看的更清楚一点

<activity android:name=".ui.MyFlutterActivity">
  <meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_bg" />
</activity>

这种方式的话我们如果不需要自定义DrawableSplashScreen的样式的话，就不需要重写provideSplashScreen，内部已经做了处理。或者重写调用super.provideSplashScreen();

其实到这里就已经可以解决问题了,效果见下图

DrawableSplashScreen支持自定义样式和隐藏时间，

DrawableSplashScreen(
                it,
                ImageView.ScaleType.CENTER, 200
  )

效果就不展示了，大家自己试试吧

可以看到，我们通过配置启动图的方式就解决了启动白黑屏的问题。

RenderMode.texture

其实网络有关于解决黑屏的文章，那就是设置Activity的Theme

 <item name="android:windowIsTranslucent">true</item>

但是其实在1.20版本上这么设置是无效的

不过在RenderMode.texture的模式下其实是有效的（又或者说起初版本使用texture模式渲染的？这个大家自己调研吧）

我们看一下下面代码

/**
     * The mode of {@code FlutterActivity}'s background, either {@link BackgroundMode#opaque} or
     * {@link BackgroundMode#transparent}.
     *
     * <p>The default background mode is {@link BackgroundMode#opaque}.
     *
     * <p>Choosing a background mode of {@link BackgroundMode#transparent} will configure the inner
     * {@link FlutterView} of this {@code FlutterActivity} to be configured with a {@link
     * FlutterTextureView} to support transparency. This choice has a non-trivial performance
     * impact. A transparent background should only be used if it is necessary for the app design
     * being implemented.
     *
     * <p>A {@code FlutterActivity} that is configured with a background mode of {@link
     * BackgroundMode#transparent} must have a theme applied to it that includes the following
     * property: {@code <item name="android:windowIsTranslucent">true</item>}.
     */
    @NonNull
    public NewEngineIntentBuilder backgroundMode(@NonNull BackgroundMode backgroundMode) {
      this.backgroundMode = backgroundMode.name();
      return this;
    }

通过对源码注释分析，我们可以得知如果是RenderMode.texture模式，必须设置windowIsTranslucent = true。

   override fun getRenderMode(): RenderMode {
        return RenderMode.texture
    }

这里的我们只重写getRenderMode返回texture模式，然后注释掉启动页面设置

    <activity android:name=".ui.MyFlutterActivity"
            android:theme="@style/MyTheme"
            >
<!--            <meta-data-->
<!--                android:name="io.flutter.embedding.android.SplashScreenDrawable"-->
<!--                android:resource="@drawable/launch_bg" />-->
        </activity>
        
    <style name="MyTheme" parent="@style/AppTheme">
        <item name="android:windowIsTranslucent">true</item>
    </style>

可以看到确实是解决了黑屏的问题。不过这种方式只适用于texture模式

总结：只要配置了启动页，无论是Surface或者texture模式，都能解决启动白黑屏的问题

扩展内容

然后接下来我们说一个扩展内容，那就是之前说到的

 @Nullable
  @Override
  public FlutterEngine provideFlutterEngine(@NonNull Context context) {
    // No-op. Hook for subclasses.
    return null;
  }

  1. 可以看到FlutterActivity重写这个方法后，只是返回一个null。表面看起来毫无意义，但是其实在混合开发中，这个方法非常重要(个人理解)，如下 3 解释

  2. 通过继承FlutterActivity的方法，其实是我们混合开发中最常用的模式，有如下好处（个人觉得常用的）

    1. 重写provideSplashScreen，设置启动屏/清单文件配置meta-data

    2. 重写getCachedEngineId，提供缓存Engine

    3. 重写provideFlutterEngine，提供缓存Engine或者实例化一个新的Engine(可以设置dart首次启动执行的方法名称)

    4. 重写getInitialRoute，指定初始化路由路径

    5. 重写getDartEntrypointFunctionName，指定首次启动执行的方法名称

    6. 重写onFlutterUiDisplayed，Flutter显示第一帧的回调监听

    7. 重写shouldDestroyEngineWithHost，判断是要在FlutterActivity销毁的时候销毁engine

    接下来我们先使用一个在Application里初始化好并加入缓存池的的FlutterEngine

    getCachedEngineId

    class MyApplication : Application() {
    private lateinit var flutterEngine :FlutterEngine
    override fun onCreate() {
        super.onCreate()
        flutterEngine = FlutterEngine(this,null,false)
        flutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint(FlutterMain.findAppBundlePath(), "main1")
        )
        FlutterEngineCache.getInstance().put("my_engine_id",flutterEngine)
    }
}

    class MyFlutterActivity : FlutterActivity() {
    override fun getCachedEngineId(): String? {
        return "my_engine_id"
    }
}

    然后看一下效果，这里指定了main1 为启动方法名

可以看到使用缓存的engine明显加载速度快了很多，因为FlutterEnigne在程序启动的时候就已经实例化并放到了缓存池中

provideFlutterEngine

override fun provideFlutterEngine(context: Context): FlutterEngine? {
        return FlutterEngineCache.getInstance().get("my_engine_id")
}

从缓存区取到FlutterEngine并返回，效果是一样的，我们直接看下debug

接下来我们实例化一个新的Engine，并指定启动方法名为main，并通过shouldDestroyEngineWithHost方法返回true-->随Activity销毁而销毁

class MyFlutterActivity : FlutterActivity() {

    override fun provideFlutterEngine(context: Context): FlutterEngine? {
        val customFlutterEngine = FlutterEngine(this, null, false)
        customFlutterEngine.dartExecutor.executeDartEntrypoint(
            DartExecutor.DartEntrypoint(FlutterMain.findAppBundlePath(), "main")
        )
        return customFlutterEngine;
    }

    override fun shouldDestroyEngineWithHost(): Boolean {
        return true
    }
}

接下来我们配置启动路由和启动方法，以及显示第一帧的回调

class MyFlutterActivity : FlutterActivity() {

    override fun provideFlutterEngine(context: Context): FlutterEngine? {
        return FlutterEngine(this, null, false)
    }

    override fun shouldDestroyEngineWithHost(): Boolean {
        return true
    }

    override fun getDartEntrypointFunctionName(): String {
        return "main1"
    }

    override fun getInitialRoute(): String {
        return "/second"
    }

    override fun onFlutterUiDisplayed() {
        super.onFlutterUiDisplayed()
        Toast.makeText(this, "onFlutterUiDisplayed", Toast.LENGTH_LONG).show()
    }
}

总结

通过这篇文章，我们可以学习到

  • Android 混合Flutter Module 时白黑屏处理方式
  • 混合开发如何更好的管理Engine或者说如何更方便的管理

通过这四篇文章，更加的提升了自己对Flutter在Android上的应用层的一些源码的深入理解

下篇文章我们将开始讲解Flutter 和Android 交互的一些东西

avatar
文章
阅读
粉丝