Android原生与Flutter混编

这篇文章旨在学习怎么在现有的Android原生项目上集成Flutter，完成Android与Flutter的混编，文章主体内容分为5部分，如下：
Android项目怎么集成FlutterModule
Flutter视图是怎么展现到前台界面的
Flutter与Weex比照
怎么进行原生页面跳转到Flutter页面
原生怎么与Flutter进行传值通讯（以EventChannel为例阐明）
接下来我会依照上面列出来的5点，逐个的进行实例讲解阐明
1.Android项目怎么集成FlutterModule
Android原生项目集成Flutter有两种方式，一种是在原生项目内集成FlutterModule，还有一种是将FLutter项目打包成arr文件，然后以组件的方式被原生项目依靠。这里咱们就只说一下在原生项目内集成FlutterModule。
第一步：在主工程下创立FlutterModule，File->New->NewFlutterProject，然后选择FlutterModule点击Next。
设置完结之后点击Finish，创立完module后咱们来看一下工程的目录结构
第二步：在app下的build.gradle增加依靠
//在android下增加jdk1.8支持compileOptions{
sourceCompatibility1.8targetCompatibility1.8}//在dependencies下增加flutter依靠implementationproject(‘:flutter’)
implementation’android.arch.lifecycle:runtime:1.1.0’implementation’android.arch.lifecycle:extensions:1.1.0′
第三步：在根目录下的settings.gradle增加装备
setBinding(newBinding([gradle:this]))
evaluate(newFile(
settingsDir.parentFile,’AndroidProject/flutter_module/.android/include_flutter.groovy’))
最终同步一下，将相关的依靠下载下来，至此就成功集成了FlutterModule了。
2.Flutter视图是怎么展现到前台界面的
其实Flutter视图是以View的方式增加到原生页面中的，这个和weex很像，简略的来说便是咱们首先要通过某一个方法来创立一个Flutter的视图，然后在原生的Activity中创立一个容器，这个容器的作用便是来装载咱们Flutter的视图，最终咱们将Flutter的View增加到容器里边就能够了。接下来咱们看一下完成的代码。
packagecom.example.flutterdemo;
importandroid.os.Bundle;
importandroid.view.View;
importandroid.widget.FrameLayout;
importandroidx.annotation.Nullable;
importandroidx.appcompat.app.AppCompatActivity;
importio.flutter.facade.Flutter;
importio.flutter.view.FlutterView;publicclassMyFlutterActivityextendsAppCompatActivity{
@OverrideprotectedvoidonCreate(@NullableBundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flutter);//创立一个FlutterViewfinalFlutterViewflutterView=Flutter.createView(this,getLifecycle(),”route1″);//实例化容器finalFrameLayoutlayout=findViewById(R.id.flutter_container);//将FlutterView增加到容器中去layout.addView(flutterView);//处理原生页面跳转Flutter页面黑屏的问题（原理便是先让界面隐藏，等第一帧绘制完结后，再让他显示出来）finalFlutterView.FirstFrameListener[]listeners=newFlutterView.FirstFrameListener[1];
listeners[0]=newFlutterView.FirstFrameListener(){
@OverridepublicvoidonFirstFrame(){
layout.setVisibility(View.VISIBLE);
}
};
flutterView.addFirstFrameListener(listeners[0]);
}
}
xml：
“1.0”encoding=”utf-8″?>
“http://schemas.android.com/apk/res/android”android:orientation=”vertical”android:layout_width=”match_parent”android:layout_height=”match_parent”>
<FrameLayout
android:id=”@+id/flutter_container”android:layout_width=”match_parent”android:layout_height=”match_parent”>
特别说一下创立Flutter视图这一块Flutter.createView(this,getLifecycle(),”route1″);，createView中传了3个参数，前两个就不说了，重点说一下最终一个参数，最终一个参数大家能够理解为原生跳转到第一个Flutter页面的路由，可能有的人还是不理解是什么意思，我举一个例子来阐明一下就会理解了。
一般咱们的Flutter页面必定不止一个，也许有很多情况下，原生要跳转到不同的Flutter页面，但是咱们Flutter的进口只有这一个，那么咱们要怎么跳转到指定的Flutter页面呢？这时候createView的最终一个参数就发挥作用，因为咱们在Flutter工程的main进口，能够获取到这个参数，进而咱们就能够依据这个参数来跳转到不同的Flutter页面了。看一下Flutter的代码感受一下。
voidmain()=>runApp(_MainEntrance(window.defaultRouteName));
Widget_MainEntrance(StringdefaultRouteName){
print(defaultRouteName);switch(defaultRouteName){case’flutter_main’:returnnewCenter(
child:SettingPage(),
);case’other’:returnnewCenter(
child:defaultPage(),
);
}
}
window.defaultRouteName这个方法会获取到原生中createView传递过来的第三个参数，咱们能够通过一个switch句子来控制不同的路由来跳转到不同的页面。即：第三个参数为flutter_main跳转到设置页面。第三个参数为other跳转到默认页面。
3.Flutter与Weex比照
在上面第2条咱们说到了原生加载Flutter视图和Weex很像，那么weex又是怎样的呢？
在weex中，也是需求咱们来创立一个原生的容器用来装载weex的view视图，如咱们新建一个WeexActivity完成IWXRenderListener，重写onViewCreated，在onViewCreated中系统会回来给咱们一个创立好的weex的view，咱们需求做的只需求将这个view增加到原生的容器中即可。
总的来说很像是因为Flutter和Weex关于Android或者iOS来说都是透明的，渠道只会以为整个Flutter展现的内容是一个view，所以，Flutter视图都是以view的方式来增加到咱们的原生项目中。
4.怎么进行原生页面跳转到Flutter页面
这块就很简略了，前面咱们已经说了，Flutter页面是以view的方式增加到咱们的原生项目中的，那么我想要跳转到Flutter页面就只需求跳转到这个容器就好了
packagecom.example.flutterdemo;
importandroidx.appcompat.app.AppCompatActivity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.view.View;publicclassMainActivityextendsAppCompatActivity{
@OverrideprotectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.mButton).setOnClickListener(newView.OnClickListener(){
@OverridepublicvoidonClick(Viewv){
Intentintent=newIntent();
intent.setClass(MainActivity.this,MyFlutterActivity.class);
startActivity(intent);
}
});
}
xml：
“1.0”encoding=”utf-8″?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android=”http://schemas.android.com/apk/res/android”xmlns:tools=”http://schemas.android.com/tools”xmlns:app=”http://schemas.android.com/apk/res-auto”android:layout_width=”match_parent”android:layout_height=”match_parent”tools:context=”.MainActivity”>
<Button
android:id=”@+id/mButton”android:layout_width=”200dp”android:layout_height=”50dp”tools:ignore=”MissingConstraints”/>
5.原生怎么与Flutter进行传值通讯（以EventChannel为例阐明）
在上一篇博客中咱们有讲过原生与Flutter通讯的三种方式，这里我再说一下EventChannel通讯。
EventChannel是单向的通讯方式，即只能通过原生向Flutter建议通讯。
（1）原生建议通讯
newEventChannel(flutterView,”NATIVE/HMLT/Channel/Setting”).setStreamHandler(newEventChannel.StreamHandler(){
@OverridepublicvoidonListen(Objecto,EventChannel.EventSinkeventSink){
eventSink.success(SharedPreferenceUtil.getToken(context));
}
@OverridepublicvoidonCancel(Objecto){
}
其中onCancel代表对面不再接纳，这里咱们应该做一些cleanup的事情。而onListen则代表通道已经建好，Native能够发送数据了。留意onListen里带的EventSink这个参数，后续Native发送数据都是通过EventSink的。
（2）在Flutter中注册监听
//注册监听原生通道EventChanneleventChannel=EventChannel(‘NATIVE/HMLT/Channel/Setting’);
（3）在Flutter中重写initState并建议通讯请求
voidinitState(){//完成通道的监听，并传入两个带有参数的函数用于监听到数据后对数据进行处理eventChannel.receiveBroadcastStream().listen(_receiveFromeNative,onError:_fromNativeError);
super.initState();
}
（4）监听到通讯数据后进行成功或失败的处理
void_receiveFromeNative(Objectpara){
print(para);
setState((){
_nativeToFlutterHMToken=para.toString();
print(“原生界面数据”+_nativeToFlutterHMToken);
});
}//原生回来错误信息void_fromNativeError(Objecterror){
print(error);
}