flutter混合开发-1
flutter 端配置
在pubspec中添加flutter_boost
这是一个混合开发插件
在main.dart中添加代码
导入头文件
import 'package:flutter_boost/flutter_boost.dart';
///创建一个自定义的Binding，继承和with的关系如下，里面什么都不用写
class CustomFlutterBinding extends WidgetsFlutterBinding with BoostFlutterBinding {}
在main函数中调用CustomFlutterBinding
void main(){
///这里的CustomFlutterBinding调用务必不可缺少，用于控制Boost状态的resume和pause
CustomFlutterBinding();
return runApp(const MyApp());
}
在第一个widget MyApp中添加路由
// 配置页面路由
Map<String, FlutterBoostRouteFactory> routerMap = {
// 这是一个map，以键值对配置，
'mainPage': (RouteSettings settings,String? uniqueId) {
return CupertinoPageRoute(//// CupertinoPageRoute：类似iOS页面的Push效果
settings: settings,
builder: (_) {
Map<String, Object> map = settings.arguments as Map<String, Object> ;
String data = map['data'] as String;
return MyHomePage(//自己要展示的页面
title: 'title',
data: data,
);
});
},
'simplePage': (settings, uniqueId) {
return CupertinoPageRoute(
settings: settings,
builder: (_) {
Map<String, Object> map = settings.arguments as Map<String, Object>;
String data = map['data'] as String;
return SimplePage(//自己要展示的页面
data: data,
);
});
},
};
// routeFactory方法用于通过传入的页面名称从routeMap获取到对应的路由配置方法，并传入所需参数进行调用
Route<dynamic>? routeFactory(RouteSettings settings, String? uniqueId) {
FlutterBoostRouteFactory? func = routerMap[settings.name!];
if (func == null) {
return null;
}
return func(settings, uniqueId);
}
Widget appBuilder(Widget home) {
return MaterialApp(
home: home,
debugShowCheckedModeBanner: false,
/// 必须加上builder参数，否则showDialog等会出问题
builder: (_, __) {
// return const Homepage();
return home;
},
);
}
在MyApp的build方法中，构建FlutterBoostApp，把上边的routeFactory和appBuilder配置到里边
// 在重写的build方法中，构建FlutterBoostApp，将routeFactory和appBuilder这两个方法作为参数传入。
@override
Widget build(BuildContext context) {
return FlutterBoostApp(
routeFactory,
appBuilder: appBuilder,
);
}
iOS端配置
1、
新建flutter项目，要和iOS项目在同一个目录下
配置iOS集成环境，在Podfile中添加这三段配置信息
1、
flutter_application_path = '../你的flutter文件夹名字'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
2、
install_all_flutter_pods(flutter_application_path)
3、
post_installdo|installer|
flutter_post_install(installer)ifdefined?(flutter_post_install)
end
然后
pod install
至此，flutter工程就与你现有iOS工程关联起来，修改flutter代码并保存，即可实现热重载
每次flutter 更改完代码， iOS原生只需要pod install 一下，就能更新到最新的修改后的flutter 代码了
在iOS原生项目中，配置FlutterBoost
1: 进行准备工作创建 BoostDelegate单例类：
import UIKit
import flutter_boost
class BoostDelegate: NSObject, FlutterBoostDelegate {
/// 单例
public static let shared = BoostDelegate()
}
2: 实现 FlutterBoostDelegate 委托方法
FlutterBoostDelegate委托包括三个必须实现的方法:
通过实现pushNativeRoute方法，实现从 Flutter 页面跳转到原生页面。
通过实现pushFlutterRoute方法，实现从原生页面跳转到 Flutter 页面。
通过实现popRoute方法，完成从Flutter页面返回到原生页面。
在AppDelegate中初始化FlutterBoost
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let boostDelegate = BoostDelegate.shared;
FlutterBoost.instance().setup(application, delegate: boostDelegate) { engine in
print("")
}
return true
}
实现从iOS原生页面跳转到Flutter页面
@objc func onClickNativePushFlutterButton(){
// 路由参数配置
let options = FlutterBoostRouteOptions()
// 路由的名称
options.pageName = "homepage"
// 传递的参数
options.arguments = ["data" : textLabel.text as Any]
// 页面是否透明
options.opaque = true
options.completion = {completion in
print("打开Flutter页面的操作完成")
}
options.onPageFinished = { dict in
print("Flutter 页面关闭返回到原生页面时，参数值:\(String(describing: dict))")
}
// 执行open()会调用"BoostDelegate"中的"pushFlutterRoute"方法
FlutterBoost.instance().open(options)
}
实现从Flutter页面跳转到原生页面
BoostNavigator.instance.push(
"NewsVC",
arguments: {"data": textStr},
);
实现从Flutter页面返回到原生页面
调用flutter_boost提供的：BoostNavigator.instance.pop()方法即可。
