Demo下载亲测可用. 不坑请点赞
在阅读此篇文章,默认已经有相应的 flutter基础
场景:
如果我们在原生项目上想要接入 flutter. 这个时候就不能采用创建一个 flutter项目的模式.因为原生项目已经开发很多了. 那么这个时候就要采取原生接入 flutter 模块的形式. 然后把模块接入 iOS/安卓端.
接入的方案是采用 flutter_boost(亿级用户). 就可以实现原生到 flutter 页面的相互跳转,相互传递数据. 是不是很香?
步骤:
1.创建 ios 项目(我这里的项目叫做 flutter_swift).
2:创建 flutter 模块
//打开终端,执行命令
cd xxxx(你的目录)
flutter create -t module flutter_demo
注意iOS 项目和 flutter 模块的目录要在同一层级,如下图
图 1.png
3:集成flutter_boost
flutter_boost github地址
里面有详细的集成文档. 按照步骤一步一步来.
我的步骤:
修改配置:
注意: 这里一定要对 environment 进行修改. 不然会因为 null safety 的问题报错. 我在这里折腾了好久. 改了这里就一切正常了.
flutter 配置.png
修改之后 flutter packages get
我的 demo 很简单. 主要代码在main.dart. 简单实现通信. 其他的请按需扩展
flutter main.dart
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'mine.dart';
import 'homePage.dart';
//这里要特别注意，如果你的工程里已经有一个继承自WidgetsFlutterBinding的自定义Binding，则只需要将其with上BoostFlutterBinding
//如果你的工程没有自定义的Binding，则可以参考这个CustomFlutterBinding的做法
//BoostFlutterBinding用于接管Flutter App的生命周期，必须得接入的
class CustomFlutterBinding extends WidgetsFlutterBinding
with BoostFlutterBinding {}
void main() {
CustomFlutterBinding();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
///路由表
static Map<String, FlutterBoostRouteFactory> routerMap = {
'homePage': (settings, uniqueId) {
return PageRouteBuilder<dynamic>(
settings: settings,
pageBuilder: (_, __, ___) {
return homePage();
});
},
'minePage': (settings, uniqueId) {
return PageRouteBuilder<dynamic>(
settings: settings, pageBuilder: (_, __, ___) {
Map<String,Object> map = settings.arguments;
String data = uniqueId;
return minePage(
data: data,
);
});
},
};
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);
}
@override
Widget build(BuildContext context) {
return FlutterBoostApp(
routeFactory,
appBuilder: appBuilder,
);
}
}
4:iOS 端的配置
修改 pod
注意点:
flutter_application_path = '../flutter_demo' flutter_demo 就是同级目录的 flutter模块的名字. 也是它的路径
一共需要添加
flutter_application_path = '../flutter_demo'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb') install_flutter_engine_pod
install_all_flutter_pods(flutter_application_path)
# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
flutter_application_path = '../flutter_demo'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'flutter_swift' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
install_flutter_engine_pod
install_all_flutter_pods(flutter_application_path)
# Pods for flutter_swift
end
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
end
end
end
install! 'cocoapods', :disable_input_output_paths => true
然后pod install
接下来:
在AppDelegate 导入import flutter_boost
创建类BoostDelegate. 其作用是实现FlutterBoostDelegate,用它来实现跳转.用这个类统一管理页面跳转,数据传输
import flutter_boost
class BoostDelegate: NSObject,FlutterBoostDelegate {
static let shared = BoostDelegate()
///您用来push的导航栏
var navigationController:UINavigationController?
///用来存返回flutter侧返回结果的表
var resultTable:Dictionary<String,([AnyHashable:Any]?)->Void> = [:];
func pushNativeRoute(_ pageName: String!, arguments: [AnyHashable : Any]!) {
//可以用参数来控制是push还是pop
let isPresent = arguments["isPresent"] as? Bool ?? false
let isAnimated = arguments["isAnimated"] as? Bool ?? true
//这里根据pageName来判断生成哪个vc，这里给个默认的了
var targetViewController = UIViewController()
if(isPresent){
self.navigationController?.present(targetViewController, animated: isAnimated, completion: nil)
}else{
self.navigationController?.pushViewController(targetViewController, animated: isAnimated)
}
}
func pushFlutterRoute(_ options: FlutterBoostRouteOptions!) {
let vc:FBFlutterViewContainer = FBFlutterViewContainer()
vc.setName(options.pageName, uniqueId: options.uniqueId, params: options.arguments,opaque: options.opaque)
//用参数来控制是push还是pop
let isPresent = (options.arguments?["isPresent"] as? Bool) ?? false
let isAnimated = (options.arguments?["isAnimated"] as? Bool) ?? true
//对这个页面设置结果
resultTable[options.pageName] = options.onPageFinished;
//如果是present模式 ，或者要不透明模式，那么就需要以present模式打开页面
if(isPresent || !options.opaque){
self.navigationController?.present(vc, animated: isAnimated, completion: nil)
}else{
self.navigationController?.pushViewController(vc, animated: isAnimated)
}
}
func popRoute(_ options: FlutterBoostRouteOptions!) {
//如果当前被present的vc是container，那么就执行dismiss逻辑
if let vc = self.navigationController?.presentedViewController as? FBFlutterViewContainer,vc.uniqueIDString() == options.uniqueId{
//这里分为两种情况，由于UIModalPresentationOverFullScreen下，生命周期显示会有问题
//所以需要手动调用的场景，从而使下面底部的vc调用viewAppear相关逻辑
if vc.modalPresentationStyle == .overFullScreen {
//这里手动beginAppearanceTransition触发页面生命周期
self.navigationController?.topViewController?.beginAppearanceTransition(true, animated: false)
vc.dismiss(animated: true) {
self.navigationController?.topViewController?.endAppearanceTransition()
}
}else{
//正常场景，直接dismiss
vc.dismiss(animated: true, completion: nil)
}
}else{
self.navigationController?.popViewController(animated: true)
}
//否则直接执行pop逻辑
//这里在pop的时候将参数带出,并且从结果表中移除
if let onPageFinshed = resultTable[options.pageName] {
onPageFinshed(options.arguments)
resultTable.removeValue(forKey: options.pageName)
}
}
}
需要在 appdelegate 里面进行初始化操作
//
// AppDelegate.swift
// flutter_swift
//
// Created by liuyaozong on 2021/8/10.
//
import UIKit
import flutter_boost
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
//创建代理，做初始化操作
let delegate = BoostDelegate()
FlutterBoost.instance().setup(application, delegate: delegate) { engine in
}
window = UIWindow(frame: UIScreen.main.bounds)
let navc = UINavigationController(rootViewController: ViewController())
window?.rootViewController = navc
window?.makeKeyAndVisible()
return true
}
}
如何使用呢:
直接上代码
//
// ViewController.swift
// flutter_swift
//
// Created by liuyaozong on 2021/8/10.
//
import UIKit
import flutter_boost
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.title = "我的原生页面"
// Do any additional setup after loading the view.
view.backgroundColor = .white
BoostDelegate.shared.navigationController = self.navigationController
let btn1 = creatBtn(title: "跳转到首页")
btn1.addTarget(self, action: #selector(clickHome), for: .touchUpInside)
let btn2 = creatBtn(title: "跳转到我的")
btn2.addTarget(self, action: #selector(clickMine), for: .touchUpInside)
view.addSubview(btn1)
view.addSubview(btn2)
btn1.frame = .init(x: 100, y: 100, width: 100, height: 50)
btn2.frame = .init(x: 100, y: 300, width: 100, height: 50)
}
//跳转到首页
@objc func clickHome() {
let options = FlutterBoostRouteOptions()
options.pageName = "homePage"
BoostDelegate.shared.pushFlutterRoute(options)
}
//跳转到个人中心
@objc func clickMine() {
let options = FlutterBoostRouteOptions()
options.pageName = "minePage"
options.arguments = ["data": "床前明月光,疑是地上霜"]
options.uniqueId = "举头望明月,低头思故乡"
BoostDelegate.shared.pushFlutterRoute(options)
}
func creatBtn(title: String) -> UIButton {
let btn = UIButton()
btn.setTitle(title, for: .normal)
btn.setTitleColor(.black, for: .normal)
return btn
}
}
效果:
原生页面.png
跳转到flutter我的页面
image.png
网友评论