Flutter模块化实践

2021-01-15 本文已影响0人 pujyzx

一、背景

本文示例及源码基于Flutter 1.22.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision (9 weeks ago) • 2020-11-13
Tools • Dart 2.10.4

由于公司内部需要对原有APP使用flutter进行改造，打算分业务进行模块化重构，故实践了下flutter如何作为模块嵌入到Android原有工程。官方文档作为学习的第一手资料，及时性和准确性都能得到保证，故先参考了https://flutter.cn/.....上模块集成的教程进行了一些示例demo的编写。

二、模块集成

1.自动集成

使用android studio创建一个空的应用工程.
通过File->New->New Module..创建flutter module,如果已有工程可以通过Import Flutter Module导入。

image.png

这样flutter 模块就自动集成好了。

2.手动集成

通常我们需要把各个业务模块拆分出来，每个团队成员负责一个模块的开发工作，互不干扰。当需要集成调试的时候，在原生壳工程中通过依赖aar或者源码的方式进行调试即可。源码依赖的方式适用于flutter代码与原生交互较多的场景，如果业务A的开发不需要修改B业务的代码，直接依赖B业务的aar包即可。git subsubmodule提供了这样一种协作方式。git submodule 允许你将一个Git 仓库当作另外一个Git 仓库的子目录。通过git subsubmodule可以方便的管理业务模块、基础模块等。具体步骤如下:

通过如下命令行创建独立module，

flutter create -t module login_module

导入android studio运行一下，会生成.android目录，结构如下

image.png

把该项目用git管理起来,模块是可以单独运行的，我们可以在上面开发业务逻辑.
在原生android工程中执行git命令行添加子模块，模块有更新时在update一下即可

git submodule add {flutter module的仓库地址}
git submodule update

原生工程的setting.gradle加入如下配置：

setBinding(new Binding([gradle: this]))                                // new
evaluate(new File(                                                     // new// new
        'login_module/.android/include_flutter.groovy'         // new
))

在工程app模块的build.gradle文件中引入对 Flutter 模块的依赖：

dependencies {
  implementation project(':flutter')
}

3.路由跳转

我们使用自动集成的flutter module描述下如何跳转到单个flutter页面,添加如下代码到Activity当中:

   findViewById<View>(R.id.fab).setOnClickListener {
            startActivity(
                FlutterActivity.createDefaultIntent(this)
            )
        }

运行APP,实际效果如下,出现了很明显的黑屏现象,主要原因是flutterEngine初始化造成的卡顿,想要最小化这个延迟时间，可以在Application中提前初始化一个 FlutterEngine，然后使用这个已经预热好的 FlutterEngine加载FlutterActivity:

image

三、源码分析

FlutterActivity

通过android studio右侧工具栏查看FlutterActivity的结构,点击方法名可以快速定位到我们需要分析的方法

image.png

FlutterActivity的继承结构如下:

image.png

Host接口对通用方法进行了抽象，FlutterActivity和FlutterFragment负责实现,内部包括Lifecycle、上下文、getInitialRoute、getAppBundlePath等方法,我们可以继承FlutterActivity重写部分方法,实现自定义flutterEngine、自定义AppBundlePath等.
先从OnCreate开始:

@Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    switchLaunchThemeForNormalTheme();
    super.onCreate(savedInstanceState);
    lifecycle.handleLifecycleEvent(Lifecycle.Event.ON_CREATE);
    //创建委托类
    delegate = new FlutterActivityAndFragmentDelegate(this);
    delegate.onAttach(this);
    delegate.onActivityCreated(savedInstanceState);
    configureWindowForTransparency();
     //createFlutterView会委托给delegate的onCreateView方法
    setContentView(createFlutterView());
    configureStatusBarForFullscreenFlutterExperience();
  }

FlutterActivityAndFragmentDelegate

委托类实现了 FlutterActivity和FlutterFragment中所有相同的Flutter逻辑.包括设置引擎、创建视图、给flutter
分发生命周期事件、执行dart代码等功能.

onCreateView方法负责ContentView的创建,内部根据渲染模式的不同会创建FlutterTextureView或者FlutterSurfaceView,随后将flutterEngine绑定到新建出来的FlutterView

>FlutterActivityAndFragmentDelegate.java
@NonNull
  View onCreateView(
      LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
      ...
    if (host.getRenderMode() == RenderMode.surface) {
      flutterView = new FlutterView(host.getActivity(), flutterSurfaceView);
    } else {
      FlutterTextureView flutterTextureView = new FlutterTextureView(host.getActivity());
        ...
      flutterView = new FlutterView(host.getActivity(), flutterTextureView);
    }
    flutterSplashView = new FlutterSplashView(host.getContext());
    ...
    flutterSplashView.displayFlutterViewWithSplash(flutterView, host.provideSplashScreen());
    flutterView.attachToFlutterEngine(flutterEngine);
    return flutterSplashView;
  }

调用flutterView#attachToFlutterEngine方法之后flutterEngine开始渲染FlutterView,此时已经可以转发来自

FlutterView的事件到绑定的flutterEngine了，例如用户触摸事件,无障碍服务事件，键盘事件等。

3.FlutterActivity在OnStart时调用代理类相应的方法,内部开始执行dart代码:

>FlutterActivityAndFragmentDelegate.java 
void onStart() {
    Log.v(TAG, "onStart()");
    ensureAlive();
    doInitialFlutterViewRun();
  }

4.doInitialFlutterViewRun方法内部会先判断dart是否被执行过,如果是话就不再执行了,接着获取到资源路径并加载

>FlutterActivityAndFragmentDelegate.java 
private void doInitialFlutterViewRun() {
    if (host.getCachedEngineId() != null) {
      return;
    }
    if (flutterEngine.getDartExecutor().isExecutingDart()) {
      return;
    }

    //STEP1 通过flutter/navigation方法通道往dart发送设置初始化路由的事件
    if (host.getInitialRoute() != null) {
      flutterEngine.getNavigationChannel().setInitialRoute(host.getInitialRoute());
    }
    //STEP2 获取bundle资源路径
    String appBundlePathOverride = host.getAppBundlePath();
    if (appBundlePathOverride == null || appBundlePathOverride.isEmpty()) {
      appBundlePathOverride = FlutterInjector.instance().flutterLoader().findAppBundlePath();
    }

    //STEP3 这里可以自定义manifest.xnl当中的io.flutter.Entrypoint属性设置dart代码的执行入口,默认情况是main方法
    DartExecutor.DartEntrypoint entrypoint =
        new DartExecutor.DartEntrypoint(
            appBundlePathOverride, host.getDartEntrypointFunctionName());
    //STEP4 调用C++层代码将main方法唤起,后面就是dart层的工作了,也就是进行widget解析渲染等.
    flutterEngine.getDartExecutor().executeDartEntrypoint(entrypoint);
  }

5.看上面代码标注的STEP1,全局搜索flutter/navigation关键字,找到SystemChannels.navigation 是通道在dart中具体的实现,ALT+单击 navigation 发现调用处可能是在WidgetsBinding中,但是这里并没有对IinitialRoute进行处理,在app.dart下对初始路由有说明.

>binding.dart
mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding {
  @override
  void initInstances() {
    super.initInstances();
    ...
    SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
  }
}

查看app.dart中的 initialRoute 注释可以知道,初始路由的值是在window.dart的 defaultRouteName,该值可以在Android中通过NewEngineIntentBuilder#initialRoute设置.

以上是flutterActivity加载页面的基本流程，搭建可用的混合路由方案还需要很多细节要处理，比如闪屏、engine复用、路由堆栈切换等等。

Flutter模块化实践

一、背景

二、模块集成

1.自动集成

2.手动集成

3.路由跳转

三、源码分析

FlutterActivity

FlutterActivityAndFragmentDelegate

猜你喜欢

热点阅读