Categories
程式開發

贝壳Flutter混合容器实践


通常纯Flutter应用的页面路由直接由Flutter自身来管理,但是对于原生App要引入Flutter技术,就会涉及到原生页面与Flutter页面之间切换,此时的页面路由需要单独管理和实现。

本文将从方案选取、容器栈管理、Flutter导航栈管理以及实践中遇到的问题等方面来介绍贝壳Flutter容器的实现。

1. Flutter的相关概念

页面:通常说的页面在Flutter中指的是Route,在Android中指的是Activity,iOS中指的是ViewController。

Flutter容器:Flutter容器提供了Dart代码的运行时环境,一般包含容器类、显示视图和引擎三部分:

  • FlutterActivity/FlutterViewController:官方提供的显示Flutter⻚面容器基础类,FlutterActivity是Android端基础类,FlutterViewController对应iOS端基础类。
  • FlutterView:是显示Flutter Widget的视图。
  • FlutterEngine:是一个用于承载Flutter应用的可移植的运行时。它实现了Flutter的核心库,包括动画和图形、文件和网络I/O、可访问性支持、插件架构,以及Dart运行时和编译工具链。

initialRoute:initialRoute是Flutter页面的路由标识。

Navigator:Navigator是管理Route的类,它通过Overlay栈来管理活动的Route。

2. 方案调研

我们在方案调研时一方面比较了官方与闲鱼的实现,另一方面在路由管理这一关键技术上做了调研以及Demo验证。

2.1 官方与闲鱼对比

对比项 闲鱼FlutterBoost-v0.1.64 Flutter官方-v1.12.13
Flutter引擎共享 Y Y(不支持动态initialRoute)
是否支持混合页面之间随意跳转 Y Y(非共享引擎下)
一致的页面生命周期管理(多Flutter页面) Y N
是否支持页面间数据传递(回传等) Y N
是否支持侧滑手势 N Y(iOS侧滑,Android通过返回键)
是否支持跨页的hero动画 Y Y
是否提供一致的Route方案 Y Y(initialRoute)
版本升级适配成本

2.2 路由管理调研

经过探讨,主要有三种实现方式:

a. 修改底层Engine代码使其动态传递生效

结论:Engine的修改涉及双端Native的修改,稳定性未知,还需考虑本地Engine的替换成本,从Flutter GitHub上看官方会支持动态传递能力,所以这个方式暂不考虑。

b. MethodChannel提前将Flutter的initialRoute传入

结论:需要新增加一个MethodChannel,优势不明显。

c. 在容器生命周期中将initialRoute动态交由自定义的NavigatorManager来展示

结论:闲鱼FlutterBoost采用的就是这种实现,其在稳定性上有保证。

2.3 方案确定

经过上述对比与调研,可以发现:

官方容器方案:只需少量定制即可用,但共享Engine时无法动态替换initialRoute;

闲鱼flutterboost方案:功能丰富,可共享Engine, 但版本升级时接口差异较大,版本适配成本较高。

最终我们决定:在整体方案上采用官方1.12的共享引擎的方式,在路由管理的实现上借鉴闲鱼FlutterBoost的实现。

3. 容器方案的实现

3.1 整体架构图

贝壳Flutter混合容器实践 1

3.2 Android端容器栈管理

在容器栈管理方面,将实现了接口IFlutterViewContainer的FlutterActivity容器缓存到Stack,Flutter层要操作这个容器,需通过uniqueId索引,找到IFlutterViewContainer关联的容器实例。IFlutterViewContainer如下:

public interface IFlutterViewContainer {
    String uniqueId();

    String initialRoute();
    // 当前Flutter页面所在的Activity
    Activity getContainerActivity();
    // 提供数据
    void finishContainer(Map result);
    // 接收数据
    void onContainerResult(int requestCode, int resultCode, Intent data);

}

这里遇到一个问题:默认情况下返回键响应的是NavigationChannel popRoute;多容器实例情况下,popRoute方式不会返回上一页面,而是直接退出:

  void onBackPressed() {
    ensureAlive();
    if (flutterEngine != null) {
      Log.v(TAG, "Forwarding onBackPressed() to FlutterEngine.");
      flutterEngine.getNavigationChannel().popRoute();
    } else {
      Log.w(TAG, "Invoked onBackPressed() before FlutterFragment was attached to an Activity.");
    }
  }

为解决这个问题,我们对返回事件进行了拦截并在RunnerManager中进行处理:

public class RunnerFlutterActivity extends FlutterActivity implements IFlutterViewContainer {
    // ...
    @Override
    public void onBackPressed() {
        //super.onBackPressed();
        invokeChannelWithParams("onBackPressed");
    }
}

3.3 iOS端侧滑返回的支持

在iOS中侧滑返回是一个基础功能,但存在侧滑返回失效的问题,有两种情况:

a. 开启系统侧滑返回、同时Flutter容器内打开多个页面, 导致Flutter页面无法通过侧滑逐级返回。

b. 关闭系统侧滑返回、同时Flutter容器内只有一个页面,导致Flutter页面无法通过侧滑退出。

针对该问题,我们做了如下修改:

1)Dart端修改

Dart端修改主要是来监控Navigator栈变化,将侧滑返回的状态传递给iOS端。

/// IOS手势返回
class IosGestureObserver extends NavigatorObserver{

  @override
  void didPush(Route route, Route previousRoute) {
    if (route.navigator.canPop()) {
      //通知Native Disable navigation Gesture
    }
    super.didPush(route, previousRoute);
  }
  @override
  void didPop(Route route, Route previousRoute) {
    if (!previousRoute.navigator.canPop()) {
      //通知Native Enable navigation Gesture
    }
    super.didPop(route, previousRoute);
  }

}

2)iOS端修改

iOS端收到消息后会将Flutter侧滑状态保留起来,传递给代理,代理可以根据Flutter侧滑返回状态来做自定义处理。如果代理没有实现,则判断进入容器时iOS系统侧滑返回手势的状态;如果为Yes,则根据Flutter侧滑状态来处理系统侧滑返回手势的状态。

- (void)notificationEnableUserGesture:(NSNotification *)notification {
  NSDictionary *userInfo = notification.userInfo;
  NSNumber *enableNumber = userInfo[@"enableUserGesture"];
  self.flutterCanPop = [enableNumber boolValue];
  if ([self.delegate respondsToSelector:@selector(flutterPagePopStateChange:)]) {
    [self.delegate flutterViewController:self PagePopStateChange:self.flutterCanPop]; 
  } else {
     if (self.originCanPop) {
       self.navigationController.interactivePopGestureRecognizer.enabled = !self.flutterCanPop;
     } 
  }
  return; 
}

@protocol BKFlutterViewControllerDelegate 
- (void)flutterViewController:(BKFlutterViewController *)viewController PagePopStateChange:(BOOL)canPop; @end

3.4 多容器实例Navigator栈管理

贝壳Flutter混合容器实践 2

如上图中所示,在单容器实例和多引擎多容器实例场景下,Flutter官方的做法是每个容器对应一个Navigator。在实际业务开发中主要是多引擎多容器的场景,但是多引擎多容器会带来引擎内存开销,因此需要单引擎多容器方案来替代。

单引擎多容器实现方案是:

  • 在打开Flutter页面后,由RunnerManager拦截默认Navigator,将容器uniqueId属性以及Flutter路由表复制到自定义RunnerNavigator,将RunnerNavigator以OverlayEntry的形式记录在栈中。
  • 然后Native容器与Flutter导航路由通过uniqueId绑定,这样在Flutter页面的操作可以经过uniqueId在Native端容器栈响应。
  • 当重新打开一个容器实例,RunnerManager会重置该Navigator的initialRoute,然后交由Navigator打开对应的Flutter页面。

3.5 Flutter页面路由协议

目前容器支持两种参数格式:

  • 格式1:

    lianjialink://flutter/page?flutter_url=my/flutter/page&tel=10086&city=bj
    
  • 格式2:

    lianjialink://flutter/page?flutter_url=my/flutter/page¶ms={"tel": 10086, "city":"bj"}
    

协议包含三部分:

  • 路由头:

    找到对应的Flutter容器,如lianjialink://flutter/page
    
  • 基础参数(key固定):

    flutter_url=my/flutter/page(Flutter页面标识)
    params={业务json参数}
    
  • 业务参数:

    url Query形式: 如 &tel=10086&city=bj
        Json形式: 如 ¶ms={"tel": 10086, "city":"bj"}
    

为兼容适配贝壳Native Router sdk的跳转场景,在进行参数解析时,Flutter内部会对参数的编码做校验,并将中文字符做Encode处理。

3.6 Android Flutter Fragment

官方FlutterFragemt与FlutterActivity类似,都无法在共享Engine时动态设定Flutter页面路由。

我们将Activity共享Engine的逻辑移植到Fragment中,使其充当容器的角色。目前暴露给业务方的使用方式与Activity一致,如下所示:

IOperationCallback router = new IOperationCallback() {
    @Override
    public void openContainer(Context context, String url, Map urlParams, int requestCode) {
        // Flutter activity内startActivity/ForResult跳转
    }

    @Override
    public void openContainerFromFragment(Fragment fragment, String url, Map urlParams, int requestCode) {
        // Flutter fragment内startActivity/ForResult跳转
    }
}

4. 总结

目前该混合容器方案已在贝壳APP、置业顾问APP上线,在性能与稳定性上表现良好。案场APP也正在接入中。如果其他业务有需求,可以联系我们。

我们这套容器方案目前可以满足绝大部分业务使用场景,针对Flutter页面build()导致的重复网络请求、iOS侧滑失效等问题,我们都做了针对性修改。

针对Android端广播、iOS端通知中心等功能,如有业务需求,我们也将在后续迭代中给予支持。

5. 参考资料

https://flutter.dev/docs/development/add-to-app

https://github.com/alibaba/flutter_boost

本文转载自公众号贝壳产品技术(ID:beikeTC)。

原文链接

https://mp.weixin.qq.com/s?__biz=MzIyMTg0OTExOQ==&mid=2247485738&idx=2&sn=f23fe71d3466c2117708b1e2c79625d0&chksm=e8373a5adf40b34cef5f395c8f7c792f067b8d41ef805798c800bbc266390922961ff7c10682&scene=27#wechat_redirect