flutter 多实例实战

tags: flutter flutter多实例

在混合开发中，我们使用fluter作为插件化开发，即起一个flutterviewcontroller，这就是一个插件，该插件与其他模块并没有任何交互，用的数据源是通过method channel主动从从宿主app取得的.

具体的需求是这样的，在第二个tab中放入一个flutter做的的视频页面，另外第三个tab有两个插件的入口，也是用flutter写的

 [原生]  ---> [flutter]

痛点问题

拿到需求第一步就想到，存在几个问题

如何同时打开多个插件，或者从一个插件打开另一个插件，即保持多个flutter vc并存
多个flutter启动后如何保证内存

第一次尝试创建

于是只需要使用创建代码不就完了吗

   FlutterViewController* flutterViewController = [[FlutterViewController alloc] initWithEngine:self.engine nibName:nil bundle:nil];

然而事情并没有那么简单首先在tab中插入的flutterviewcontroller.view直接拿出来显示不出来，使用延迟加载也不管用

第二次尝试 - 解决显示问题

经过大神指点要先使用present然后dismiss才能显示出来

  __weak __typeof(self)weakSelf = self;
        self.ctr4.modalPresentationStyle = UIModalPresentationOverCurrentContext;
        [self presentViewController:weakSelf.ctr4 animated:NO completion:^{
            [weakSelf dismissViewControllerAnimated:NO completion:^{
                [weakSelf addChildViewController:weakSelf.ctr4];
                [weakSelf.view bringSubviewToFront:weakSelf.tabbarContainer];
            }];
        }];

接下来准备添加多个flutter 然而在push过程中发现flutter的第一次显示的界面竟然是上次tab的页面，因为engine是同一份的，我们创建的时候会保存一份engine。

第三次尝试显示错误

这里有个前提是1.0 ios flutter engine无法释放，如果仅仅使用FlutterViewController.new的方式肯定是会有释放的，但是官方提供了一种根据engine创建 fluttervc的方式，所以保留一份engine，或者说让engine保留成一个单例状态。

至此第三次尝试失败

但是从这一次的问题来看，flutter上面的界面并不是跟着fluttervc走的，而是跟着engine走的，fluttervc仅仅提供了一个手势和其他事件入口，所以即使关闭了fluttervc或者delloc了，只要engine存在，图形渲染就保留了上一次的界面，到此为止多实例的fluttervc从根本上就没有存在的必要了。

第四次尝试单实例实现多vc样式

我们知道fluttervc有个初始routername的方法，在第一次启动的时候可以设置这个routername

- (void)setInitialRoute:(NSString*)route

于是想到通过这个来设置不同的路由。殊不知，这个方法和initWithEngine 搭配使用时，并没有起作用，传入到main.dart里面的window.defaultRouteName一直是 / 根目录符号

- (instancetype)initWithEngine:(FlutterEngine*)engine
                       nibName:(NSString*)nibNameOrNil
                        bundle:(NSBundle*)nibBundleOrNil NS_DESIGNATED_INITIALIZER;

另外设置即使可以起作用，也无法实现多路由问题。

第五次尝试改造setInialRoute

既然官方存在bug，那就解决吧，首先看了一圈flutter engine setInialRoute的实现，最终在shell.cc里面，如果直接改动engine编译有点麻烦，想到的解决方案是在main.dart里面去原生读取宿主路由然后渲染对应的页面。

    MosNativeHelper.defaultRouteName().then((name){
      setState(() {
        if(name != null){
            widget.defaultRouteName = name;
        }
      });
    });

然而这是第一次读取，后续怎么更新新的页面呢，这时候需要宿主主动发通知给flutter了

第六次尝试宿主发消息给flutter

flutter有个eventchannel就是用于接收宿主的事件回调的，使用方法是先注册事件,发送一个参数给宿主，然后监听event，最后释放


  // 注册一个通知
  static const EventChannel eventChannel = const EventChannel('com.moschat.app/native_post');

  // 渲染前的操作，类似viewDidLoad
  @override
  void initState() {
    super.initState();
    // 监听事件，同时发送参数12345
    eventChannel.receiveBroadcastStream(12345).listen(_onEvent,onError: _onError);
    print("[flutter]进入到initState");
    widget.defaultRouteName = window.defaultRouteName;
    MosNativeHelper.defaultRouteName().then((name){
      setState(() {
        if(name != null){
          widget.defaultRouteName = name;
        }
      });
    });
  }

在宿主端的代码

添加eventchannel代理方法

        NSString *channelName = @"com.moschat.app/native_post";
        FlutterEventChannel *evenChannal = [FlutterEventChannel eventChannelWithName:channelName binaryMessenger:flutterViewController];
        // 代理
        [evenChannal setStreamHandler:MOSFlutterEngine.sharedInstance];

添加代理 FlutterStreamHandler

#pragma mark - <FlutterStreamHandler>
// // 这个onListen是Flutter端开始监听这个channel时的回调，第二个参数 EventSink是用来传数据的载体。
- (FlutterError* _Nullable)onListenWithArguments:(id _Nullable)arguments
                                       eventSink:(FlutterEventSink)events {
    
    // arguments flutter给native的参数
    // 回调给flutter， 建议使用实例指向，因为该block可以使用多次
    if (events) {
        self.eventsBlock = [events copy];
        self.eventsBlock (@"我是标题");
    }
    return nil;
}

/// flutter不再接收
- (FlutterError* _Nullable)onCancelWithArguments:(id _Nullable)arguments {
    // arguments flutter给native的参数
    return nil;
}

由于eventblock可以回调多次，可以达到宿主直接发消息给flutter的作用。 main.dart中接收到消息，则可以直接在flutter里面刷新根路由界面。

第七次尝试优化

在切换插件过程中还是会有闪现前一个界面的问题，我们在pop fluttervc的时机多flutter发送一个刷新一个黑色界面的指令，则在下次启动时会闪过一个黑色页面的过程，这个时机可以看做是启动的过程大概0.3s。第二个点是在flutter poproute的过程中，有业务需要在中间的route就退出整个vc，此时要注意一个点是，pop vc过程中要主动一层层返回到flutter根部页面，否则下一次看到的还是上一次的那个页面。