Flutter开发(二十七):Flutter_1.12与Android混合开发
Flutter 可以作为独立页面进入,如 Android 原生进入 Flutter ,或者Flutter 进入 Android 。还有的情况一个页面存在Flutter item 与Android 页面。目前有一个 Android 项目,然后在这个 Android 项目中导入 Flutter。...
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)
);
}
});
更多推荐

所有评论(0)