- 作为页面的一部分嵌入。
===================================================================================
既然是做混合开发,那么我们肯定是由Android原生项目的。假如native项目的路径是这样的:flutter/flutter_hybrid/native,那么我们需要在native上一层目录flutter_hybrid中创建Flutter module。
cd flutter/flutter_hybrid/
//创建支持AndroidX的flutter_module
flutter create --androidx -t module flutter_module
//创建不支持AndroidX的flutter_module
flutter create -t module flutter_module
所以我们在创建模块的时候首先要确定native项目是不是已经支持AndroidX,如果支持就需要加上 --androidx 参数。
输入后控制台打印如下:
$ flutter create -t module flutter_module
Creating project flutter_module…
flutter_module/test/widget_test.dart (created)
flutter_module/flutter_module.iml (created)
flutter_module/.gitignore (created)
flutter_module/.metadata (created)
flutter_module/pubspec.yaml (created)
flutter_module/README.md (created)
flutter_module/lib/main.dart (created)
flutter_module/flutter_module_android.iml (created)
flutter_module/.idea/libraries/Flutter_for_Android.xml (created)
flutter_module/.idea/libraries/Dart_SDK.xml (created)
flutter_module/.idea/modules.xml (created)
flutter_module/.idea/workspace.xml (created)
Running “flutter pub get” in flutter_module… 1.2s
Wrote 12 files.
All done!
Your module code is in flutter_module/lib/main.dart.
看到All done就表示我们项目创建好了。整个module目录和原生Flutter基本一样,主要就是Android、iOS的宿主工程和lib目录以及pubspec.yaml文件。
=====================================================================================
module项目创建好后就需要添加到Android项目中了。我们打开Android项目的setting.gradle文件,添加如下代码:
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
//flutter_module即为创建的模块名称
‘flutter_module/.android/include_flutter.groovy’
))
setBinding与evaluate允许Flutter模块包括它自己在内的任何Flutter插件,在settings.gradle中以类似 :flutter、package_info、:video_player的方式存在。
然后打开app/build.gradle在dependencies标签中添加依赖:
implementation project(‘:flutter’)
这样两步就完成了依赖的添加,这里为什么添加的叫“flutter” 而不是 “flutter_module”呢?因为项目编译完成后会在Android项目的目录下生成叫Flutter的目录,这就是需要我们依赖的。还有个需要注意是gradle中的minSdkVersion必须要大于等于16,因为这个flutter支持的最低版本。同时添加使用java8来编译。在app/build.gradle中的android标签中添加:
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
===================================================================================
依赖完成后我们就可以调用flutter模块来创建UI了。Flutter为我们提供了两种方式调用,一种是createView,以view的形式加载。另一种是createFragment,以Android中的fragment的形式加载。
createView方式:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
FlutterView flutterView = Flutter.createView(this, getLifecycle(), “initialRoute”);
setContentView(flutterView);
}
}
createFragment方式:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
//container为activity_main布局中的占位符FrameLayout
transaction.replace(R.id.container, Flutter.createFragment(“initialRoute”));
transaction.commit();
}
}
这样就将Flutter默认的首页加载到应用上了。
从上面两部分代码中我们可以看到都有一个 “initialRoute” 参数,这个参数是用来告诉Dart代码在Flutter视图中显示哪个小部件。下面我们就来修改module中的main.dart代码来加载我们自己的页面。
我们设置两个route,分别展示route1Widget,和route2Widget,当没有匹配的时候展示提醒文字。
import ‘package:flutter/material.dart’;
import ‘dart:ui’;
void main() => runApp(MyApp(
//通过window.defaultRouteName获取从native传递过来的参数,需要导入dart:ui包
initParams: window.defaultRouteName,
));
class MyApp extends StatelessWidget {
final String initParams;
MyApp({Key key, this.initParams}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter_Android混合开发’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(initParams: initParams),
);
}
}
class HomePage extends StatefulWidget {
final String initParams;
const HomePage({Key key, this.initParams}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _widgetRoute(widget.initParams),
),
);
}
}
///路由转发
Widget _widgetRoute(String route) {
switch (route) {
case “route1”:
return route1Widget();
case “route2”:
return route2Widget();
default:
return notFoundWidget();
}
}
Widget route1Widget() {
return Center(
child: Text(
“this is route1Widget”,
style: TextStyle(color: Colors.red, fontSize: 20),
),
);
}
Widget route2Widget() {
return Center(
child: Text(
“this is route2Widget”,
style: TextStyle(color: Colors.blue, fontSize: 20),
),
);
}
Widget notFoundWidget() {
return Center(
child: Text(
“未匹配到路由111”,
style: TextStyle(fontSize: 40),
),
);
}
我们现在将加载Flutter时的initialRoute参数替换为 “route1”,那页面将加载route1Widget,替换为 “route2”,将加载route2Widget。否则将展示notFoundWidget。当然我们可以直接传路由参数,但是因为这个参数本身是一个字符串,所以我们可以来搞事情。比如传递一个json串,那么是不是可以做很多事呢?这里我就不贴demo了,因为和上面的逻辑基本一样,大家可以去试试看。
总结
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识,这里放上相关的我搜集整理的14套腾讯、字节跳动、阿里、百度等2021最新面试真题解析,我把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。
网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
以及面试相关知识,这里放上相关的我搜集整理的14套腾讯、字节跳动、阿里、百度等2021最新面试真题解析,我把技术点整理成了视频和PDF(实际上比预期多花了不少精力),包知识脉络 + 诸多细节。
[外链图片转存中…(img-2N3He6CF-1715825853677)]
[外链图片转存中…(img-IFulakDR-1715825853680)]
[外链图片转存中…(img-OBChU6zb-1715825853681)]
[外链图片转存中…(img-Ue3WDBZm-1715825853683)]
网上学习 Android的资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!