android混合编程,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”>

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″?>

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”>

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);

}