搭建混合开发环境
这是给学过 Flutter,但是没学过 Android 开发的人看的。
建立Android项目
- 打开Android Studio,点击新建Android项目
- 选择相对应的项目,本例选的是 Basic Activity
- 填写项目名称:Android_Demo,语言选Java(kotlin不会),Minimum API level 必须选择 API 15 以上,不选Use androidx.* artifacts,点击 Finish 完成
建立Flutter项目
- 在 Android Studio 中 点击 File -> New -> New Flutter Project…
- 选择 Flutter Module(看不见往下拉),然后 next
- 填写 Flutter 项目名称:flutter_demo,选择Flutter SDK 路径,项目路径要跟Android项目一样,点击 next
- Company domain 要填入跟 Android项目一样的(不一样的我没试过),不选 Use androidx.* artifacts,点击 Finish 完成。
注意:创建完 Flutter 项目会有个提示框,问是在当前窗口,还是在新窗口展示项目,选 new Window。
导入Flutter模块
- 在 Android_Demo/settings.gradle 中填入如下代码,并保存
同时,代码上方会弹出同步提示,点击 Sync NowsetBinding(new Binding([gradle: this])) // new evaluate(new File( // new settingsDir.parentFile, // new 'flutter_demo/.android/include_flutter.groovy' // new ))
- 等 sync 完成,settings.gradle 中会多出 2 行代码,并会出现 sync 失败(windows系统才会有)
解决方法:把 ‘\f’ 改成 ‘/f’ 或 ‘\f’,再点击上方的 Try Again。就 sync 成功了。
这时 在 Android 项目中 就能看见 Flutter 项目了 - 在Android_Demo/app/build.gradle文件中的 android 中填入
在 dependencies 中填入compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 }
点击上方的 Sync Nowimplementation project(':flutter')
View 方式显示 Flutter 页面
- 编辑 Android_Demo / app / src / main / java / com.example.android_demo 下的 MainActivity.java 文件添加如下代码
如图所示://...省略代码 import io.flutter.facade.Flutter; // new import android.widget.FrameLayout; // new // import io.flutter.view.FlutterView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { //...省略代码 fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); onLoadFlutter(view); // new } }); } // 用 view 方式显示 Flutter 页面 public void onLoadFlutter(View view) { View flutterView = Flutter.createView(this, getLifecycle(), "route1"); //route1 为 flutter 的路由名 FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(600, 800); layoutParams.topMargin = 100; addContentView(flutterView, layoutParams); // 这样也行 // final FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route1"); //route1 为 flutter 的路由名 // final FrameLayout layout = (FrameLayout) findViewById(R.id.flutter_container); // layout.addView(flutterView); } //...省略代码 }
保存后,运行。点击下面的按钮,会在屏幕上方显示出 Flutter 页面
Fragment 方式显示 Flutter 页面
- 把上面的 onLoadFlutter 方法替换为如下代码。
import android.support.v4.app.FragmentTransaction; //引入库 public void onLoadFlutter(View view) { FragmentTransaction transaction= getSupportFragmentManager().beginTransaction(); transaction.replace(R.id.someContainer,Flutter.createFragment("route1")); transaction.commit(); }
在content_main.xml中添加个CardView(其它Container都行),并把id设置成 someContainer,然后在设置一下layout(布局)既可。
运行图如下