目录
前言
摸了几天，总算是把页面跳转和数据传递的基础知识搞清楚了，接下来就能做正式的开发工作了。
Flutter官方混合开发教程里介绍了基本的混合方式，不过也就是能显示Flutter页面的级别。
鄙人没啥文化，看英文文档比较吃力，就去查了一下国人的教程，可惜，大多数教程都是很早之前写的，已经过期了；还有些教程就是个记事本，啥都不讲清楚，偷了点别人的文字，贴两行代码就结束了；更有甚者直接偷别人的文章，连偷的东西已经过期了都不知道。
看了这么多恶心人的文章，觉得写东西还是要负点责任，就算没法写的一目了然也不能误人子弟。
前提：准备iOS项目
为非iOS开发者写的，自己会弄的就不用看了。
既然已经装好了Flutter并且准备做iOS开发，Cocoapods肯定已经装好了。
首先，用XCode新建一个项目，就放在桌面吧，我这边项目命名FlutterHybird。
然后，打开终端，进入项目根目录，初始化pod；执行pod init之后会生成一个叫Podfile的文件。
最后，执行pod install，安装Podfile中的依赖库，目前没有添加依赖库，所以这一步只会生成一个包含Pod的iOS项目（工作空间）。
打开这个项目（工作空间），前期准备就做好了。
cd ~/Desktop/FlutterHybird
pod init
pod install
open FlutterHybird.xcworkspace
第一步：添加Flutter组件
Flutter提供的方案是把编译后的Flutter代码按照Cocoapods的方式集成到iOS项目中。
随便找一个地方，就桌面吧，在终端输入下面的命令行，生成Flutter的组件。
cd ~/Desktop
flutter create -t module flutter_module
接下来，画面切到刚才打开的iOS项目，在Pods工程下方找到Podfile，顶部添加下面两行代码，flutter_application_path的值就是刚才创建的Flutter组件的根目录。
flutter_application_path = '~/Desktop/flutter_module/'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
然后，在target内添加安装代码
install_all_flutter_pods(flutter_application_path)
按照我现在的Cocoapods版本，添加完成后是介个亚子。
改好之后回到iOS项目目录，安装pod。
cd ~/Desktop/FlutterHybird
pod install
注意：Flutter更新到1.9.x版本iOS运行报错问题，Permission denied
注意：编译iOS项目时意外终止容易导致Flutter组件出现异常，以至于项目无法编译，没研究这个问题，不过用git管理flutter组件的话应该可以很快修复异常
如果在执行pod install时遇到Cocoapod相关问题，请自行百度
第二步: 展示Flutter内容
打开ViewController.m文件，为了让代码简单明了，就把代码都写在这里。
首先，生成FlutterEngine，初步理解，这是Flutter的核心管理器。
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
然后，用这个核心管理器生成 FlutterViewController
self.flutterViewController = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
有了控制器，剩下的就是把它展示出来了。接下来创建一个按钮，并且添加按钮的点击事件。
#import "ViewController.h"
#import <Flutter/Flutter.h>
@interface ViewController ()
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@property (nonatomic,strong) FlutterViewController *flutterViewController;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self setupUI];
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
self.flutterViewController = [[FlutterViewController alloc] initWithEngine:self.flutterEngine
nibName:nil
bundle:nil];
}
#pragma mark - setup UI
- (void)setupUI {
UIButton *presentButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.view addSubview:presentButton];
presentButton.frame = CGRectMake(60, 200, 160, 40);
[presentButton setTitle:@"展示Flutter页面" forState:UIControlStateNormal];
[presentButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[presentButton addTarget:self
action:@selector(presentButtonTapped:)
forControlEvents:UIControlEventTouchUpInside];
}
#pragma mark - UI response
- (void)presentButtonTapped:(UIButton *)button {
[self presentViewController:self.flutterViewController animated:YES completion:nil];
}
@end
现在可以运行一下代码，点击按钮后会展示Flutter的Demo。
这个展示效果和我记忆中的不太一样，一开始还以为是Futter重写了展示效果，后面一看iOS的官方注释，发现是苹果更新了iOS13中模态展示的默认风格，和Flutter无关。
这个展示页面是将Flutter的内容完全的嫁接过来的，Flutter的事件和页面跳转都可以正常运行。
第三步：消息传递
消息传递是指iOS和Flutter之间互相发送数据，Flutter提供了BasicMessageChannel、MethodChanel、EventChanel三种信息传递方式（我暂时知道这么几个）。
这次就简单介绍一下BasicMessageChannel。
首先，我们要引入包文件services
import 'package:flutter/services.dart';
然后，初始化BasicMessageChannel对象
final BasicMessageChannel _messageChannel = BasicMessageChannel('messageChannel', StandardMessageCodec());
有了BasicMessageChannel对象，我们就可以在设置收发消息了。这里的逻辑实在收到消息时再把消息内容发送出去。
//接收消息
_messageChannel.setMessageHandler((message) {
//对消息做处理
return null;
});
//发送消息
_messageChannel.send(message);
下面贴一个完整的代码，这里我们看到了一个消息嵌套——在接收的方法体内发送消息，本以为会成为死循环，但是并没有。没研究，猜测是BasicMessageChannel只触发跨平台消息传递。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
final BasicMessageChannel _messageChannel = BasicMessageChannel('messageChannel', StandardMessageCodec());
@override
Widget build(BuildContext context) {
_messageChannel.setMessageHandler((message) {
print('收到iOS消息：$message');
_messageChannel.send(message);
return null;
});
...
Flutter端配置完毕，接下来写iOS端的代码。
内容很简单，把FlutterBasicMessageChannel创建出来，然后实现事件接收。还有在flutterViewController展示成功时，向Flutter端发送消息。
...
@interface ViewController ()
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@property (nonatomic,strong) FlutterViewController *flutterViewController;
@property (nonatomic,strong) FlutterBasicMessageChannel *messageChannel;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self setupUI];
self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[self.flutterEngine runWithEntrypoint:nil];
self.flutterViewController = [[FlutterViewController alloc] initWithEngine:self.flutterEngine
nibName:nil
bundle:nil];
self.messageChannel = [FlutterBasicMessageChannel messageChannelWithName:@"messageChannel" binaryMessenger:self.flutterViewController];
[self.messageChannel setMessageHandler:^(id _Nullable message, FlutterReply _Nonnull callback) {
NSLog(@"收到Flutter消息：%@", message);
}];
}
...
#pragma mark - UI response
- (void)presentButtonTapped:(UIButton *)button {
self.flutterViewController.modalPresentationStyle = UIModalPresentationAutomatic;
[self presentViewController:self.flutterViewController animated:YES completion:^{
[self.messageChannel sendMessage:@"Flutter页面展示成功"];
}];
}
@end
运行后输出结果如下，可以看到同平台发出的消息并没有被响应。
image.png
后记
磨蹭了两天才写完这点东西，从实践过的内容里选出一些比较必要的知识写了出来，搞清楚这些之后其他知识自然能融会贯通。
网友评论