Flutter-集成到现有App项目

2021-12-02 本文已影响0人就叫汉堡吧

简介

鉴于Flutter技术刚刚成型，越来越多的人用Flutter来写页面，然后嵌入到原生中去，从而达到页面的代码是通用的。因此写下此篇文章研究整理Flutter集成到原声App中的过程和原理。
配置

首先需要创建一个Flutter Module，AndroidStudio可以完成这个工作，或者你已经有了一个Flutter Module，这里贴一下命令行创建方式：
```
$ cd some/path/
$ flutter create -t module --org com.example my_flutter
```
然后因为Flutter的AOT编译模式目前仅支持x86_64, armeabi-v7a and arm64-v8a，为了兼容所以在app/build.gradle中添加：
```
android {
  //...
  defaultConfig {
    ndk {
      // Filter for architectures supported by Flutter.
      abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86_64'
    }
  }
}
```
因为目前Flutter的Android engine使用的是Java8，所以在app/build.gradle中添加：
```
android {
  //...
  compileOptions {
    sourceCompatibility 1.8
    targetCompatibility 1.8
  }
}
```
接下来开始添加依赖，有下面两种方式：
1. aar方式
  
  进入Flutter Module路径下执行下面命令：
```
$ cd some/path/my_flutter
$ flutter build aar
```
  然后结束后会看到如图信息：
  
  然后按照命令行输出的步骤操作。
  
  这种方式适合有自己远程仓库的情况，当然也可以把repo文件夹放在项目中直接使用相对路径引入，这样团队中的每个人就不会调成一致的本地路径，但是这样又会把原声项目和flutter项目耦合在一起，所以还是适合远程仓库。
2. 代码方式
  
  aar方式可以本地引入，我们还可以直接源代码引入，但是它们的配置不太一样。
  
  首先需要把flutter放在一个容易从原生项目文件夹容易找到的地方，比如同级或子目录，最好放在子目录，因为源代码导入意味着flutter项目源码对于原生项目开发者来说也是公开的，所以为了方便统一拷贝和上传，最好放在子目录。
  
  然后在原生项目的settings.gradle中加入：
```
// Include the host app project.
include ':app'                                    // assumed existing content
setBinding(new Binding([gradle: this]))                                // new
evaluate(new File(                                                     // new
//        settingsDir.parentFile,                                              // Assuming my_flutter is a sibling to MyApp.
        settingsDir,                                              // Assuming my_flutter is a child-dir in MyApp.
        'flutter_module/.android/include_flutter.groovy'                         // new
))   
```
  在app/build.gradle中加入依赖项：
```
implementation project(':flutter')
```
  为什么是flutter这个名字呢?看一下include_flutter.groovy中有如下配置：
```
gradle.include ":flutter"
gradle.project(":flutter").projectDir = new File(flutterProjectRoot, ".android/Flutter")
```
  可以看到:flutter就是.android中的Flutter项目，这个项目是根据我们前面的配置从而根据宿主App项目来生成的：
  
  看一下它的iml文件：
```
<module external.linked.project.id=":flutter" ...>
       ... ... 
</module>        
```
  可以看到，project.id设置为了:flutter。
创建FlutterActivity

连接原生和flutter要用sdk的FlutterActivity，我们可以不用继承FlutterActivity，直接使用FlutterActivity来当我们的flutter承载页面。
1. 在AndroidManifest.xml中配置
```
<activity
  android:name="io.flutter.embedding.android.FlutterActivity"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize"
  />
```
  和原生一样的配置方式。
2. 启动Activity
```
myButton.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity.createDefaultIntent(currentActivity)
    );
  }
});
```
  这种启动方式是以flutter切入点是main()函数并且初始路由是‘/’为前提的，切入点无法通过构造Intent来改变，但是初始路由可以，像下面这样：
```
myButton.addOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity
        .withNewEngine()
        .initialRoute("/my_route")
        .build(currentActivity)
      );
  }
});
```
  关于切入点和初始路由是怎么和原生联系起来的下面再说。
  
  你可以在原生程序的任何一个地方通过上面这种传统的Intent启动FlutterActivity，但是上面这种方式每次启动都会构造一个新的Flutter Engine，创建这个东西需要耗费不少时间，至少肉眼上能看出一个显著的延迟，为了达到和打开一个原生页面的速度差不多的目的，我们需要在启动Flutter页面之前就先创建一个Flutter Engine，然后把它缓存起来，打开flutter页面时直接使用就会解决这个问题，官方给我们提供了相关的API来这么做，这里把它放在Application启动时：
```
public class MyApplication extends Application {
  public FlutterEngine flutterEngine;
  
  @Override
  public void onCreate() {
    super.onCreate();
    // Instantiate a FlutterEngine.
    flutterEngine = new FlutterEngine(this);

    // Start executing Dart code to pre-warm the FlutterEngine.
    flutterEngine.getDartExecutor().executeDartEntrypoint(
      DartEntrypoint.createDefault()
    );

    // Cache the FlutterEngine to be used by FlutterActivity.
    FlutterEngineCache
      .getInstance()
      .put("my_engine_id", flutterEngine);
  }
}
```
  这里手动设置了一个切入点，就是engine可以和dart代码进行交互的一个入口，我们看一下DartEntrypoint.createDefault方法：
```
@NonNull
public static DartEntrypoint createDefault() {
  FlutterLoader flutterLoader = FlutterInjector.instance().flutterLoader();

  if (!flutterLoader.initialized()) {
    throw new AssertionError(
        "DartEntrypoints can only be created once a FlutterEngine is created.");
  }
  return new DartEntrypoint(flutterLoader.findAppBundlePath(), "main");
}
```
```
public DartEntrypoint(
    @NonNull String pathToBundle, @NonNull String dartEntrypointFunctionName) {
  this.pathToBundle = pathToBundle;
  dartEntrypointLibrary = null;
  this.dartEntrypointFunctionName = dartEntrypointFunctionName;
}
```
  可以看到，这种默认的方式下设置的dartEntrypointFunctionName就是main。
  
  executeDartEntrypoint方法一旦执行意味着dart中的main方法开始执行了，通常是：
```
void main() => runApp(MyApp());
```
  此时Engine还没有绑定到FlutterActivity中，所以此时就有一个0尺寸的window存在，直到attatch到FlutterActivity中才显示出来。
  
  FlutterEngineCache就是用来缓存FlutterEngine实例的，这里的key值可以自定义，但是要和后面取的时候保持一致：
```
myButton.addOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    startActivity(
      FlutterActivity
        .withCachedEngine("my_engine_id")
        .build(currentActivity)
      );
  }
});
```
  注意，一旦预热Flutter Engine则意味着无论FlutterActivity创建和销毁dart code都会一直在执行，你可以利用它做一些非UI的后台工作，如果要销毁和释放资源需要从FlutterEngineCache中取到它并调用destroy方法。
  
  还要清楚的一点是，Flutter的dubug和release版本有着完全不同的性能表现，如果要测试性能的话用release版本测试。
  
  关于配置初始路由，前面我们知道了使用新Engine的时候如何配置路由，那使用缓存路由的时候就要在执行dart code之前配置，在上面的flutterEngine.getDartExecutor().executeDartEntrypoint代码之前设置：
```
flutterEngine.getNavigationChannel().setInitialRoute("your/route/here");
```
  注意，初始路由通过Engine指定必须在runApp()方法之前设置，如果在多个Activity或Fragment中使用同一个Engine并且想要不同的初始路由的话就得通过MethodChannel和dart代码交互来完成了。
  
  上面我们知道了如何启动一个普通的Activity，在Android中还有一种是半透明的Activity，比如Dialog，它的创建方式和上面的一样，之不过多了些设置。
  
  首先需要指定一个theme设置android:windowIsTranslucent属性：
```
<style name="MyTheme" parent="@style/MyParentTheme">
  <item name="android:windowIsTranslucent">true</item>
</style>
```
  然后在启动时指定bankground：
```
// Using a new FlutterEngine.
startActivity(
  FlutterActivity
    .withNewEngine()
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(context)
);

// Using a cached FlutterEngine.
startActivity(
  FlutterActivity
    .withCachedEngine("my_engine_id")
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)
    .build(context)
);
```
  当然，这种方式只会让PhoneWindow是透明的，其中的内容（即布局）需要自己去控制部分显示，如果选择宽高都match_parent的话也不会是透明的效果。

创建FlutterFragment

创建方式和传统的Activity中创建是一样的：

public class MyActivity extends FragmentActivity {
    // Define a tag String to represent the FlutterFragment within this
    // Activity's FragmentManager. This value can be whatever you'd like.
    private static final String TAG_FLUTTER_FRAGMENT = "flutter_fragment";

    // Declare a local variable to reference the FlutterFragment so that you
    // can forward calls to it later.
    private FlutterFragment flutterFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Inflate a layout that has a container for your FlutterFragment.
        // For this example, assume that a FrameLayout exists with an ID of
        // R.id.fragment_container.
        setContentView(R.layout.my_activity_layout);

        // Get a reference to the Activity's FragmentManager to add a new
        // FlutterFragment, or find an existing one.
        FragmentManager fragmentManager = getSupportFragmentManager();

        // Attempt to find an existing FlutterFragment,
        // in case this is not the first time that onCreate() was run.
        flutterFragment = (FlutterFragment) fragmentManager
            .findFragmentByTag(TAG_FLUTTER_FRAGMENT);

        // Create and attach a FlutterFragment if one does not exist.
        if (flutterFragment == null) {
            flutterFragment = FlutterFragment.createDefault();

            fragmentManager
                .beginTransaction()
                .add(
                    R.id.fragment_container,
                    flutterFragment,
                    TAG_FLUTTER_FRAGMENT
                )
                .commit();
        }
    }
}

当需要响应Activity的相关回调事件时也需要手动调用FlutterFragment的对应方法：

public class MyActivity extends FragmentActivity {
    @Override
    public void onPostResume() {
        super.onPostResume();
        flutterFragment.onPostResume();
    }

    @Override
    protected void onNewIntent(@NonNull Intent intent) {
        flutterFragment.onNewIntent(intent);
    }

    @Override
    public void onBackPressed() {
        flutterFragment.onBackPressed();
    }

    @Override
    public void onRequestPermissionsResult(
        int requestCode,
        @NonNull String[] permissions,
        @NonNull int[] grantResults
    ) {
        flutterFragment.onRequestPermissionsResult(
            requestCode,
            permissions,
            grantResults
        );
    }

    @Override
    public void onUserLeaveHint() {
        flutterFragment.onUserLeaveHint();
    }

    @Override
    public void onTrimMemory(int level) {
        super.onTrimMemory(level);
        flutterFragment.onTrimMemory(level);
    }
}

关于构造FlutterFragment，和FlutterActivity类似（包括engine等），只不过换成了FlutterFragment的静态方法，不同的是FlutterFragment的build()会返回一个FlutterFragment实例，此外FlutterFragment的构建过程还多了一些API。

FlutterFragment可以在构造的时候指定entryPoint：

FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
    .dartEntrypoint("mySpecialEntrypoint")
    .build();

FlutterFragment可以指定渲染模式：

// With a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
    .renderMode(FlutterView.RenderMode.texture)
    .build();

// With a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
    .renderMode(FlutterView.RenderMode.texture)
    .build();

RenderMode有三种渲染模式：surface、texture、image。

surface模式有着最佳的性能表现，是默认的模式，但是它要求flutter UI必须在其他Android View的上方；texture模式性能不如surface，但是它是为了可以和Android View自由嵌套而生的；image模式，主要作用是此模式下，FlutterView可以和Android原生View完全交互。

FlutterFragment也支持透明渲染模式，来处理一些将底部的：

// Using a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
    .transparencyMode(FlutterView.TransparencyMode.transparent)
    .build();

// Using a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
    .transparencyMode(FlutterView.TransparencyMode.transparent)
    .build();

另外，大部分场景下Fragment都是作为window的一部分来展示，还有一种场景是Frgament是Activity的全部，所以Fragment的所有和window的行为都要通过Activity去执行，这种情况下，FlutterFragment有一个API可以设置是否允许FlutterFragment的engine拥有所处Activity的引用：

// Using a new FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withNewEngine()
    .shouldAttachEngineToActivity(false)
    .build();

// Using a cached FlutterEngine.
FlutterFragment flutterFragment = FlutterFragment.withCachedEngine("my_engine_id")
    .shouldAttachEngineToActivity(false)
    .build();

Flutter-集成到现有App项目

简介

配置

aar方式

代码方式

创建FlutterActivity

创建FlutterFragment

猜你喜欢

热点阅读