借圖Flutter_Boost
背景：
現(xiàn)在Flutter火熱，各個(gè)公司都會(huì)嘗試使用Flutter開(kāi)發(fā)，一般采用的都會(huì)是混合形式的開(kāi)發(fā)，混合開(kāi)發(fā)目前Flutter官方提供的不太完善、iOS和Android有差異性、接口也不同意、很麻煩，也有一些大廠為了實(shí)現(xiàn)高效率高可用自己實(shí)現(xiàn)一套混合開(kāi)發(fā)技術(shù),比如閑魚(yú)的flutter_boost和哈羅的flutter_thrio。兩者之間優(yōu)缺點(diǎn)及設(shè)計(jì)原理、架構(gòu)等后續(xù)再來(lái)具體分析。接下我們先說(shuō)下flutter_boost在iOS項(xiàng)目中的接入混合實(shí)踐。
準(zhǔn)備工作：
1.Flutter SDK
為了便于后續(xù)我們flutter sdk版本的快速切換，我們需要安裝管理工具，方便我們?cè)诤罄m(xù)開(kāi)發(fā)或者調(diào)試過(guò)程中快速切換版本。
這里推薦使用的Flutter SDK管理工具fvm,能快速切換版本，具體不做介紹，直接去查看文檔就可以，很詳細(xì)。
安裝自己所需的flutter sdk版本（我這里安裝的是1.17.1版本，因?yàn)樾枰逻叺膄lutter_boost版本對(duì)應(yīng)）：
fvm-flutter
2.flutter_boost框架
了解混合框架flutter_boost,首先需要知道我們需要使用他們的那個(gè)版本及版本對(duì)應(yīng)的flutter sdk版本，比如：flutter_boost:v1.17.1-hotfixes 對(duì)應(yīng)的flutter sdk：1.17.1 。
正式接入：
一、flutter_module工程
1.創(chuàng)建空文件夾后，使用命令：
flutter create -t module flutter_module
如果iOS使用的是Swift開(kāi)發(fā)使用命令：
flutter create -i swift -t module flutter_module
2.flutter_module創(chuàng)建完成后，打開(kāi)flutter_module文件夾下pubspec.yaml文件。如下：
pubspec.yaml
注意：這里我用的flutter_boost的SDK最新版本：v1.17.1-hotfixes
3.cd到flutter_module文件夾下，執(zhí)行命令：
flutter packages get
包下載完成后flutter_module工程基本配置已經(jīng)完成。
二、iOS原生工程
1.創(chuàng)建iOS項(xiàng)目
注意：iOS工程根目錄與flutter_module根目錄平級(jí)。
2.cd到iOS工程目錄下創(chuàng)建Podfile文件，執(zhí)行命令：
touch Podfile 生成文件，然后可以使用vim Podfile 編輯或者直接open Podfile 或者直接打開(kāi)文本編輯也可以。
在文件中添加
flutter_application_path = '../flutter_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
install_all_flutter_pods(flutter_application_path)
pod
3.執(zhí)行 pod install下載依賴庫(kù)。
pod
4.配置項(xiàng)目
如果是OC工程，則不會(huì)要做什么額外處理，如果是Swift項(xiàng)目需要建個(gè)橋接文件FlutterHybridiOS-Bridging-Header.h，同時(shí)Build Sttings中需要配置該文件路徑。
swift調(diào)用OC橋接文件
對(duì)應(yīng)路徑
注意：
（1）.看其他博客出現(xiàn)過(guò)，查看Build Phases中是否存在Flutter Build Script的腳本，如果不存在需要添加對(duì)應(yīng)腳本，但是目前我沒(méi)出現(xiàn)缺失的情況。
生成的Flutter Build Script
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
三.代碼接入實(shí)踐
這塊可以直接下載flutter_boost官方例子OC，flutter_boost官方例子Swift查看具體實(shí)踐，其中OC例子是最全的，這里只已Swift項(xiàng)目為基礎(chǔ)介紹基礎(chǔ)使用。
<1>.iOS平臺(tái)
- 1.創(chuàng)建實(shí)現(xiàn)flutter_boost路由類，實(shí)現(xiàn)FLBPlatform中的協(xié)議，和Flutter中也會(huì)有對(duì)應(yīng)的方法來(lái)處理跳轉(zhuǎn)操作。（直接參考上邊官方的代碼類就行），即push模式跳轉(zhuǎn)、present模式跳轉(zhuǎn)、關(guān)閉頁(yè)面等方法。
import Foundation
//import flutter_boost
class PlatformRouterImp: NSObject, FLBPlatform {
func open(_ url: String, urlParams: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
//跳轉(zhuǎn)打開(kāi)原生Native頁(yè)面
if (url == "native") {
self.openNativeVC(url, urlParams: urlParams, exts: exts)
return
}
var animated = false;
if exts["animated"] != nil{
animated = exts["animated"] as! Bool;
}
let vc = FLBFlutterViewContainer.init();
vc.setName(url, params: urlParams);
self.navigationController().pushViewController(vc, animated: animated);
completion(true);
}
func present(_ url: String, urlParams: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
var animated = false;
if exts["animated"] != nil{
animated = exts["animated"] as! Bool;
}
let vc = FLBFlutterViewContainer.init();
vc.setName(url, params: urlParams);
navigationController().present(vc, animated: animated) {
completion(true);
};
}
func close(_ uid: String, result: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
var animated = false;
if exts["animated"] != nil{
animated = exts["animated"] as! Bool;
}
let presentedVC = self.navigationController().presentedViewController;
let vc = presentedVC as? FLBFlutterViewContainer;
if vc?.uniqueIDString() == uid {
vc?.dismiss(animated: animated, completion: {
completion(true);
});
}else{
self.navigationController().popViewController(animated: animated);
}
}
private func openNativeVC(
_ name: String?,
urlParams params: [AnyHashable : Any]?,
exts: [AnyHashable : Any]?
) {
let vc = UIViewController()
let animated = (exts?["animated"] as? NSNumber)?.boolValue ?? false
if (params?["present"] as? NSNumber)?.boolValue ?? false {
self.navigationController().present(vc, animated: animated) {}
} else {
self.navigationController().pushViewController(vc, animated: animated)
}
}
func navigationController() -> UINavigationController {
let delegate = UIApplication.shared.delegate as! AppDelegate
let navigationController = delegate.window?.rootViewController as! UINavigationController
return navigationController;
}
}
- 2.flutter_boost初始化，即在啟動(dòng)的時(shí)候初始化框架代碼。
import UIKit
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
//路由創(chuàng)建
let router = PlatformRouterImp.init();
//FlutterBoost初始化
FlutterBoostPlugin.sharedInstance().startFlutter(with: router, onStart: { (engine) in
});
self.window = UIWindow.init(frame: UIScreen.main.bounds)
let viewController = ViewController.init()
let navi = UINavigationController.init(rootViewController: viewController)
self.window.rootViewController = navi
self.window.makeKeyAndVisible()
return true
}
- 3.具體使用（創(chuàng)建自己的ViewController，添加兩個(gè)按鈕進(jìn)行測(cè)試跳轉(zhuǎn)Native）
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.white
// Do any additional setup after loading the view.
let btn = UIButton(type: .custom);
btn.backgroundColor = UIColor.red
btn.frame = CGRect(x: 10, y: 60, width: 60, height: 40)
btn.setTitle("Push Flutter Page", for: .normal)
self.view.addSubview(btn);
btn.addTarget(self, action: #selector(onClickPushFlutterPage), for: .touchUpInside);
let btn2 = UIButton(type: .custom);
btn2.backgroundColor = UIColor.blue
btn2.frame = CGRect(x: 10, y: 120, width: 60, height: 40)
self.view.addSubview(btn2);
btn2.setTitle("Present Flutter Page", for: .normal)
btn2.addTarget(self, action: #selector(onClickPresentFlutterPage), for: .touchUpInside);
}
@objc func onClickPushFlutterPage(_ sender: UIButton, forEvent event: UIEvent){
// self.navigationController?.navigationBar.isHidden = true
//其中這里的first，在Flutter也會(huì)對(duì)應(yīng)初始化的時(shí)候注冊(cè)該標(biāo)識(shí)對(duì)應(yīng)的Widget。
FlutterBoostPlugin.open("first", urlParams:[kPageCallBackId:"MycallbackId#1"], exts: ["animated":true], onPageFinished: { (_ result:Any?) in
print(String(format:"call me when page finished, and your result is:%@", result as! CVarArg));
}) { (f:Bool) in
print(String(format:"page is opened\(f)"));
}
}
@objc func onClickPresentFlutterPage(_ sender: UIButton, forEvent event: UIEvent){
FlutterBoostPlugin.present("second", urlParams:[kPageCallBackId:"MycallbackId#2"], exts: ["animated":true], onPageFinished: { (_ result:Any?) in
print(String(format:"call me when page finished, and your result is:%@", result as! CVarArg));
}) { (f:Bool) in
print(String(format:"page is presented"));
}
}
}
*注意點(diǎn)：
（1）.調(diào)用FlutterBoostPlugin.open和present方法時(shí)候，傳遞的urlname（first、second）會(huì)在Flutter中注冊(cè)對(duì)應(yīng)的Widget。
<2>.Flutter平臺(tái)
- 1.main.dart （可以理解為入口類，類似iOS中的Appdelete類），實(shí)現(xiàn)Flutter_boost初始化和注冊(cè)Native對(duì)應(yīng)的widget。
（1）初始化flutter_boost插件及注冊(cè)對(duì)應(yīng)的widgets。
（2）初始化路由router。
import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'simple_page_widgets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
//（1）初始化注冊(cè)
FlutterBoost.singleton.registerPageBuilders(<String, PageBuilder>{
'first': (String pageName, Map<String, dynamic> params, String _) => FirstRouteWidget(),
'firstFirst': (String pageName, Map<String, dynamic> params, String _) =>
FirstFirstRouteWidget(),
'second': (String pageName, Map<String, dynamic> params, String _) => SecondRouteWidget(),
'secondStateful': (String pageName, Map<String, dynamic> params, String _) =>
SecondStatefulRouteWidget(),
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Boost example',
//（2）初始化路由
builder: FlutterBoost.init(postPush: _onRoutePushed),
home: Container(color: Colors.white));
}
//（2）
void _onRoutePushed(
String pageName,
String uniqueId,
Map<String, dynamic> params,
Route<dynamic> route,
Future<dynamic> _,
) {}
}
注意點(diǎn)：
(1)import 'simple_page_widgets.dart'這個(gè)dart類中是實(shí)現(xiàn)了很多widget，比如first對(duì)應(yīng)的FirstRouteWidget，second對(duì)應(yīng)的SecondRouteWidget等。但是在實(shí)際開(kāi)發(fā)中不要把widget放到一個(gè)Dart類種實(shí)現(xiàn)，降低代碼冗余、代碼復(fù)雜度、降低維護(hù)成本等。
- 2.實(shí)現(xiàn)widget（具體可以查看官方類中的simple_page_widgets.dart）
下邊只展示我們之前對(duì)應(yīng)的first和second。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter_module/platform_view.dart'; //封裝的view
/// *********************** FirstRouteWidget*/
class FirstRouteWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _FirstRouteWidgetState();
}
class _FirstRouteWidgetState extends State<FirstRouteWidget> {
_FirstRouteWidgetState();
// flutter 側(cè)MethodChannel配置，channel name需要和native側(cè)一致
// static const MethodChannel _methodChannel = MethodChannel('flutter_native_channel');
// String _systemVersion = '';
// Future<dynamic> _getPlatformVersion() async {
// try {
// final String result = await _methodChannel.invokeMethod('getPlatformVersion');
// print('getPlatformVersion:' + result);
// setState(() {
// _systemVersion = result;
// });
// } on PlatformException catch (e) {
// print(e.message);
// }
// }
@override
void initState() {
print('initState');
super.initState();
}
@override
void didChangeDependencies() {
print('didChangeDependencies');
super.didChangeDependencies();
}
@override
void didUpdateWidget(FirstRouteWidget oldWidget) {
print('didUpdateWidget');
super.didUpdateWidget(oldWidget);
}
@override
void deactivate() {
print('deactivate');
super.deactivate();
}
@override
void dispose() {
print('[XDEBUG] - FirstRouteWidget is disposing~');
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('First Route')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: const Text('Open native page'),
onPressed: () {
print('open natve page!');
FlutterBoost.singleton
.open('native')
.then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve native route result $value');
});
},
),
RaisedButton(
child: const Text('Open FF route'),
onPressed: () {
print('open FF page!');
FlutterBoost.singleton
.open('firstFirst')
.then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve FF route result $value');
});
},
),
RaisedButton(
child: const Text('Open second route1'),
onPressed: () {
print('open second page!');
FlutterBoost.singleton
.open('second')
.then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve second route result $value');
});
},
),
RaisedButton(
child: const Text('Present second stateful route'),
onPressed: () {
print('Present second stateful page!');
FlutterBoost.singleton.open('secondStateful',
urlParams: <String, dynamic>{
'present': true
}).then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve second stateful route result $value');
});
},
),
RaisedButton(
child: const Text('Present second route'),
onPressed: () {
print('Present second page!');
FlutterBoost.singleton.open('second',
urlParams: <String, dynamic>{
'present': true
}).then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve second route result $value');
});
},
),
RaisedButton(
child: Text('Get system version by method channel:' + _systemVersion),
onPressed: () => _getPlatformVersion(),
),
],
),
),
);
}
}
/// *********************** SecondRouteWidget*/
class SecondRouteWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Second Route')),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to first route when tapped.
final BoostContainerSettings settings =
BoostContainer.of(context).settings;
FlutterBoost.singleton.close(
settings.uniqueId,
result: <String, dynamic>{'result': 'data from second'},
);
},
child: const Text('Go back with result!'),
),
),
);
}
}
注意點(diǎn)：
（1）.狀態(tài)管理的處理，如果細(xì)心地同學(xué)會(huì)發(fā)現(xiàn)，上邊FirstRouteWidget和SecondRouteWidget的繼承類不同，一個(gè)是StatelessWidget（非動(dòng)態(tài)的）、StatefulWidget（動(dòng)態(tài)的）兩種狀態(tài)管理。具體理解可以自己去查資料學(xué)習(xí)，后續(xù)也會(huì)專門講下這個(gè)。
場(chǎng)景：
1.原生-->>原生
這個(gè)不多說(shuō)直接還是原生跳轉(zhuǎn)就行
2.原生-->>Flutter
調(diào)用PlatformRouterImp中的方法
3.Flutter-->>原生
需要Flutter代碼執(zhí)行
FlutterBoost.singleton
.open('native')
.then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve native route result $value');
});
4.Flutter-->>Flutter (走Native原生Controller容器跳轉(zhuǎn))
FlutterBoost.singleton
.open('firstFirst')
.then((Map<dynamic, dynamic> value) {
print(
'call me when page is finished. did recieve FF route result $value');
});
5.Flutter-->>Flutter(走Flutter自己的Flutter Navigator 跳轉(zhuǎn))
Navigator.push<dynamic>(
context,
MaterialPageRoute<dynamic>(builder: (_) => PushWidget()),
);
這個(gè)自己去做處理，建議既然使用flutter_boost就都采用flutter_boost統(tǒng)一的路有跳轉(zhuǎn)。
如果想實(shí)現(xiàn)只打開(kāi)一個(gè)Flutter的原生控制器，其他走flutter內(nèi)部跳轉(zhuǎn)router邏輯，則需要自己處理，或者也可以看下flutter_thrio框架。
到這里基本上全部工作都可以了，F(xiàn)lutter和iOS都會(huì)關(guān)聯(lián)上。直接運(yùn)行Xcode就可以了。
關(guān)于分離開(kāi)發(fā)：
需要注意的地方如果之后考慮分開(kāi)開(kāi)發(fā)，F(xiàn)lutter同學(xué)只開(kāi)發(fā)Flutter的話，需要在flutter_module/.ios/下工程配置之前iOS端的東西即可，就可以使用flutter run直接跑起來(lái)，且也能使用flutter_boost路由。做到Flutter開(kāi)發(fā)Flutter，原生開(kāi)發(fā)原生。做到分離。
下一篇會(huì)寫下Flutter_Boost在Android中的集成應(yīng)用和代碼實(shí)踐，Flutter與Native混合開(kāi)發(fā)-FlutterBoost集成應(yīng)用和開(kāi)發(fā)實(shí)踐(Android)。
萌圖鎮(zhèn)樓
