上一篇讲如何在原生oc工程中简单的嵌入Flutter页面。那如果有多个Flutter页面咋办？原生的页面和Flutter页面又如何做通讯呢？
如果有多个Flutter页面，那么我们就不能像之前那样去简单的创建一个FlutterViewController了。通常要把Flutter engine抽出来做成一个单利，通过Flutter engine来初始化FlutterViewController。
- 现在Flutter module端创建2个flutter页面。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('页面$pageIndex'),
)),
);
} else if (pageIndex == 'two') {
return Scaffold(
appBar: AppBar(
title: Text('$pageIndex'),
),
body: Center(
child: RaisedButton(
onPressed: () {
MethodChannel('two_page').invokeMapMethod('popTo');
},
child: Text('页面$pageIndex'),
),
),
);
}
return null;
}
}
- 在原生的oc页面中，有2个按钮，点击按钮present到不同flutter页面。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 = @"首页";
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"}]; // 这里执行，会调用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"}]; // 这里执行，会调用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
最后，安利一个阿里的flutter框架https://github.com/alibaba/flutter_boost，直接用它不香么！！！
flutter_boost.png
