1. Android 项目导入新的 flutter module
2. Android 项目导入已有的 flutter module
3. Android 页面跳转到 Flutter 页面两种方式
下面的代码都是针对与 Flutter_1.12 版本后的,这个版本废弃了io.flutter.facade包,所以写法都不一样了,目前新创建的项目都是 Flutter 1.12 版本后的。详情可以看一下这个链接,总结到位:
Flutter学习小计:Android原生项目引入Flutter - 简书
1. Android 项目导入新的 flutter module
打开 Android 项目,依次点击 File --> New --> New Flutter Project ,然后选择 flutter module:
点击下一步,名称就写 flutter module ,因为要和后面依赖关联,选择 SDK 路径与文件路径,这里文件路径尽量和 Android 项目在一个目录下面:
点击下一步,写上包名就可以了,这样就可以打开文件夹,查看到新创建的 flutter_module 和Android 项目在同一目录下:
创建完成,在 Android 项目中配置;在项目根目录 settings.gradle 中添加下面代码,意思是在同一目录下,导入项目名称为 flutter_module:
...
setBinding(new Binding([gradle:this]))
evaluate(new File(
settingsDir.parentFile,'flutter_module/.android/include_flutter.groovy'
))
在 app 的 build.gradle 中添加依赖:
dependencies {
...
implementation project(':flutter')
}
编译等待就可以了,目前 Android 应该是自动添加 JavaVersion.VERSION_1_8 。如果没有,在 app 的 build.gradle 中添加:
android {
...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
2. Android 项目导入已有的 flutter module
项目中导入已有的 module ,将现有的 module 放到 Android 项目同一文件夹内,更改根目录 settings.gradle 中的代码,然后将 flutter_module 改为 module 的名称即可,编译会自动导入,我导入网上下载的 module ,如下
...
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
'flutter_module-master/.android/include_flutter.groovy'
))
然后添加依赖:
dependencies {
...
implementation project(':flutter')
}
编译即可。
3. Android 页面跳转到 Flutter 页面并传值
导入完毕后,发现并不能编写 dart 代码,用 AndroidStudio 打开刚创建的 flutter module,如下图,左侧是 flutter module ,来编写 dart 代码,右侧是 Android 项目,来编写原生代码:
跳转传值目前有两种方式:
第一种作为 fragment 嵌入到原生页面中;
第二种是作为一个新的页面 activity 跳转进入;
先看第一种,将 flutter 页面嵌入到原生页面,也不传值;效果如下:
打开原生 MainActivity ,先在 activity_main 这个 xml 文件中加一个按钮和一个 fragment ,代码:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="@+id/btn_test"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="跳转Flutter"
android:textColor="@color/white"
android:textSize="16dp"
android:textAllCaps="false"
android:gravity="center"/>
<FrameLayout
android:id="@+id/frameFlutter"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
再去 MainActivity 中添加跳转代码:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import io.flutter.embedding.android.FlutterFragment;
public class MainActivity extends AppCompatActivity {
Button tv_test;
FrameLayout frameFlutter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv_test = findViewById(R.id.btn_test);
frameFlutter = findViewById(R.id.frameFlutter);
tv_test.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过FlutterFragment引入Flutter编写的页面
FlutterFragment flutterFragment = FlutterFragment.createDefault();
getSupportFragmentManager()
.beginTransaction()
.add(R.id.frameFlutter, flutterFragment)
.commit();
}
});
}
}
第二种将 flutter 作为新的页面,然后跳转进入;效果图如下:
先注册 FlutterActivity 页面,AndroidManifest.xml 中加入:
<activity
android:name="io.flutter.embedding.android.FlutterActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize" />
在 MainActivity 代码中加入:
tv_test.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//跳转到flutter页面
startActivity(
FlutterActivity.createDefaultIntent(MainActivity.this)
);
}
});