上一篇講如何在原生oc工程中簡(jiǎn)單的嵌入Flutter頁(yè)面乖坠。那如果有多個(gè)Flutter頁(yè)面咋辦玻熙？原生的頁(yè)面和Flutter頁(yè)面又如何做通訊呢绷蹲？
如果有多個(gè)Flutter頁(yè)面，那么我們就不能像之前那樣去簡(jiǎn)單的創(chuàng)建一個(gè)FlutterViewController了赶掖。通常要把Flutter engine抽出來(lái)做成一個(gè)單利镊靴，通過(guò)Flutter engine來(lái)初始化FlutterViewController。
- 現(xiàn)在Flutter module端創(chuàng)建2個(gè)flutter頁(yè)面锉桑。showCode:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
String pageIndex = 'one';
final MethodChannel methodChannel1 = MethodChannel('one_page');
final MethodChannel methodChannel2 = MethodChannel('two_page');
@override
void initState() {
// TODO: implement initState
super.initState();
methodChannel1.setMethodCallHandler((call) {
if (call.method == 'initParms') {
Map parms = call.arguments;
setState(() {
pageIndex = parms['pageName'].toString();
});
}
return null;
});
methodChannel2.setMethodCallHandler((call) {
if (call.method == 'initParms') {
Map parms = call.arguments;
setState(() {
pageIndex = parms['pageName'].toString();
});
}
return null;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: _rootPage(pageIndex));
}
Widget _rootPage(String pageIndex) {
if (pageIndex == 'one') {
return Scaffold(
appBar: AppBar(
title: Text('$pageIndex'),
),
body: Center(
child: RaisedButton(
onPressed: () {
MethodChannel('one_page').invokeMapMethod('popTo');
},
child: Text('頁(yè)面$pageIndex'),
)),
);
} else if (pageIndex == 'two') {
return Scaffold(
appBar: AppBar(
title: Text('$pageIndex'),
),
body: Center(
child: RaisedButton(
onPressed: () {
MethodChannel('two_page').invokeMapMethod('popTo');
},
child: Text('頁(yè)面$pageIndex'),
),
),
);
}
return null;
}
}
- 在原生的oc頁(yè)面中排霉，有2個(gè)按鈕，點(diǎn)擊按鈕present到不同flutter頁(yè)面民轴。showCode:
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@property(nonatomic,strong)FlutterEngine* myEngine;
@property(nonatomic,strong)FlutterViewController* flutterVC;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"首頁(yè)";
self.flutterVC = [[FlutterViewController alloc]initWithEngine:self.myEngine nibName:nil bundle:nil];
self.flutterVC.modalPresentationStyle = 0;
}
-(FlutterEngine *)myEngine{
if (!_myEngine) {
FlutterEngine* flutterEngine = [[FlutterEngine alloc]initWithName:@"IPBao"];
if (flutterEngine.run) {
_myEngine = flutterEngine;
}
}
return _myEngine;
}
- (IBAction)pushToFlutterVC:(UIButton *)sender {
FlutterMethodChannel* channel = [FlutterMethodChannel methodChannelWithName:@"one_page" binaryMessenger:self.flutterVC];
[channel invokeMethod:@"initParms" arguments:@{@"pageName":@"one"}]; // 這里執(zhí)行攻柠，會(huì)調(diào)用flutter里面的methodchannel球订。
[channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result) {
if ([call.method isEqualToString:@"popTo"]) {
[self.flutterVC dismissViewControllerAnimated:YES completion:nil];
}
}];
[self presentViewController:self.flutterVC animated:YES completion:nil];
}
- (IBAction)pushToFlutterVC2:(UIButton *)sender {
FlutterMethodChannel* channel = [FlutterMethodChannel methodChannelWithName:@"two_page" binaryMessenger:self.flutterVC];
[channel invokeMethod:@"initParms" arguments:@{@"pageName":@"two"}]; // 這里執(zhí)行，會(huì)調(diào)用flutter里面的methodchannel瑰钮。
__weak typeof(self) weakSelf = self;
[channel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult _Nonnull result) {
if ([call.method isEqualToString:@"popTo"]) {
[weakSelf.flutterVC dismissViewControllerAnimated:YES completion:nil];
}
}];
[self presentViewController:self.flutterVC animated:YES completion:nil];
}
@end
效果圖.gif
最后冒滩，安利一個(gè)阿里的flutter框架https://github.com/alibaba/flutter_boost，直接用它不香么＠饲础？！
flutter_boost.png
