iPad大屏ampampampFlutter多引擎适配之路（

　　背景
　　在电商场景中iPad的大屏拥有比普通手机相比更大的屏幕，对于购物体验而言，如能充分利用好iPad的大屏体验，无疑提高用户购买体验，但一直以来在混合栈应用特别是Flutter混合栈中，在iPad大屏适配和Flutter多引擎适配都是个老大难问题。本文会介绍闲鱼在这iPad适配中的各个疑难点。
　　分屏模式
　　华为，oppo等厂商折叠屏的方案。界面会在展开和折叠时展示不同的视图样式。oppo称为平行视窗，华为称之为平行视界。苹果虽未推出折叠屏，但在WWDC2019推出了也为iPad的大屏体验的解决方案multiwindow模式。开发者可以根据自己的需求对进行定制。
　　同一款App在不同设备上保持一致操作逻辑，总是让使用者感受愉悦的用户体验。那么，如何让iPad版本拥有折叠屏一样的操作逻辑，让Pad竖屏等同于折叠屏折叠状态，横屏时等同于折叠屏展开左右分屏状态，iPad的大屏适配工作，应运而生。
　　分屏模式逻辑
　　虽然各个折叠屏厂商对于视图的展示方案各自不同，总体而言共分成两种展示逻辑。
　　一种是常用于电商软件，左右分屏商品对比展示逻辑。这里我称为双屏比价模式
　　第二种是用于类似iPad设置界面，左固定，右打开。这里因为保留了常见的栈导航栏逻辑，这里我称为双屏导航模式
　　下面以连续打开四个视图（ViewControllerActivity）为例子。对比一下普通手机设备，折叠屏设备，以及iPad设备在两种模式下的差异。
　　双屏比价模式
　　最新视图在最右屏，次新视图在最左屏。这种场景适合浏览多个商品宝贝进行比对。
　　iPad版本横竖屏逻辑
　　竖屏
　　竖屏时和普通页面栈展示逻辑相同。新界面push时，覆盖旧界面。
　　横屏
　　横屏时左右分屏，栈模式：左边永远是次最新，右边永远是最新界面
　　push逻辑动画
　　pop逻辑
　　分屏导航模式
　　左屏固定不变，最新、次新视图堆叠在右屏。这种场景适合左边是列表页，在右屏打开多个商品宝贝。其目的是让最新的界面在都在右边打开
　　竖屏
　　界面：全屏栈模式：新界面push时，覆盖旧界面。
　　横屏时左右分屏，栈模式：左边永远是次最新，右边永远是最新界面
　　push逻辑动画
　　pop逻辑
　　需求
　　1。支持左右分屏
　　2。保留基于栈（UINavigationController）的展示逻辑
　　3。业务改造成本越小越好
　　技术方案
　　闲鱼内部核心业务都使用flutter进行搭建，涉及由集团中台提供基础业务均是原生ViewController，再有部分业务使用H5进行搭建。这三大部分的业务都需要进行兼容改造
　　1。UINavigationController改造
　　基于UINavigationController的ContainerViewController永远都把新的ViewController覆盖老的ViewController。无法做到上述说的左右分屏。我的做法是基于UINavigationController创建子类，重写pushpop的ViewCotroller整个排版逻辑。这样让整个应用原来的pushpop逻辑不用修改。只需要在iPad使用不一样的新类NavigationControllerForiPad就能完美的迁移。
　　自定义ContainerViewCotroller
　　iOS中专门用于控制ViewController的控制类都统称为ContainerViewCotroller。如UINavigationController，UITabBarController，andUIPageViewController
　　最主要的工作是重写一个ContainerViewCotroller，自定定义新ViewCotroller被push进来、旧ViewCotroller被pop移除后，后如何排版，以及其中动画如何展示等问题。
　　以push新ViewCotroller为例子
　　（void）pushViewController：（UIViewController）newVCanimated：（BOOL）animated｛
　　UIViewControlleroldVC获得最倒数第一个ViewController
　　〔selfpushOldViewController：oldVCnewViewController：newVCanimated：animated〕
　　｝
　　（void）pushOldViewController：（UIViewController）oldVC
　　newViewController：（UIViewController）newVC
　　animated：（BOOL）animated｛
　　。。。
　　〔oldVCbeginAppearanceTransition：NOanimated：animated〕；
　　1。将新的Viewcontroller。view加入到根viewcontroller。view
　　WrapperViewnewWrapperView
　　〔selfappendWrapperViewWithViewController：newVC
　　wrapperFrame：〔selfnewViewControllerBeginFrame〕
　　toView：self。view
　　animated：animated〕；
　　newVC。view。frame〔selfchildViewFrame〕；
　　newWrapperView。
　　2。把新的Viewcontroller添加为子Viewcontroller
　　〔selfaddChildViewController：newVC〕；
　　3。进场动画
　　〔UIViewanimateWithDuration：0。35
　　animations：｛
　　newWrapperView。frame〔supernewViewControllerEndFrame〕；
　　；
　　｝
　　completion：（BOOLfinished）｛
　　4。进场动画结束
　　〔oldVCendAppearanceTransition〕；
　　〔newVCdidMoveToParentViewController：self〕；
　　｝〕；
　　｝
　　退场（ableUIViewController）popViewControllerAnimated：（BOOL）animated｛
　　1。移除倒数第一个Viewcontroller
　　〔lastViewControllerwillMoveToParentViewController：nil〕；
　　〔lastViewControllerbeginAppearanceTransition：NOanimated：animated〕；
　　2。倒数第二个Viewcontroller即将显示
　　〔secondToLastViewControllerbeginAppearanceTransition：YESanimated：animated〕；
　　3。退场动画
　　〔UIViewanimateWithDuration：0。35
　　animations：｛
　　lastWrapper。frame〔selfnewViewStartFrame〕；
　　secondToLastWrapper。frame〔selfrightViewFrame〕；
　　｝
　　completion：（BOOLfinished）｛
　　4。移除旧Viewcontroller。view
　　〔lastWrapperremoveFromSuperview〕；
　　〔lastViewControllerendAppearanceTransition〕；
　　〔lastViewControllerremoveFromParentViewController〕；
　　5。倒数第二个ViewController显示
　　〔secondToLastViewControllerendAppearanceTransition〕；
　　｝〕；
　　｝
　　这部分功能很核心的工作是，在进场退场后，依次调用相关函数，这些函数Viewcontroller的生命周期事件至关重要。
　　更详细接口文档：https：developer。apple。comdocumentationuikitviewcontrollerscreatingacustomcontainerviewcontroller
　　https：developer。apple。comlibraryarchivefeaturedarticlesViewControllerPGforiPhoneOSImplementingaContainerViewController。html
　　2。原生界面改造
　　在横竖屏切换时，会导致ViewController。view触发重绘。使用原生进行布局的页面需要保持所有的view都是相对布局。这里推荐使用autolayout方式，这样既一套代码能完美的兼容iPhoneiPad
　　具体的工作有：
　　弃用〔UIScreenmain〕。bound。size，改为ViewController。view。size作为当前布局宽高仅仅支持单屏（iPhone）时，〔UIScreenmain〕。bound。sizeViewController。view。size但在iPad多屏横屏时〔UIScreenmain〕。bound。sizeoViewController。view。size
　　将绝对布局改为相对布局，即使用autolayout
　　感知横竖屏的切换事件
　　3。H5界面适配
　　H5本身已经有非常好的适配不同屏幕大小的特性，但可能在一些特殊的场景上不排除因为历史原因专为iOS适配hardcode
　　感知横竖屏的切换事件
　　4。Flutter业务技术改造界面技术改造
　　flutter业务因为原生就本身支持不同屏幕大小的适配。FlutterViewController。view会在界面重排时重新触发界面的重绘。从dart层布局层面代码无需特别调整。
　　横竖屏的切换时有不同的展示逻辑，正常监听didChangeMetrics即可override
　　voiddidChangeMetrics｛
　　setState（｛lastSizeWidgetsBinding。instance。window。physicalS｝）；
　　｝
　　引擎层技术改造
　　这是本次iPad适配中的重头戏。因为闲鱼中大部分核心基础业务都是基于Flutter进行开发。让多个Flutter界面顺畅运行在iPad，绕不过的问题。
　　先回到闲鱼的终端路由架构。
　　闲鱼路由系统是基于flutterboost进行搭建。而flutterboost的原理则是多个界面共享同一个引擎，这一实现的有几个好处
　　优化内存，同一时刻Flutter引擎只提供给最前的视图即可
　　多个Flutter视图因为运行在同一个DartIsolate的缘故，数据能互相访问（单例等）
　　绑定到Isolate的Flutter插件、messagechannel都只有一份
　　但正是这些优点，同一时刻只能存在一个Flutter引擎，导致两个Flutter视图左右无法同屏。
　　那是否可以给每个视图（ViewControllerActivity）创建一个flutter引擎？这种方案也出现如下问题
　　业务问题
　　每个Flutter引擎会创建两份原生plugin实例，如原生plugin的实现是基于单例则会出现紊乱
　　创建多个Flutter引擎增加非常多的性能开销
　　性能问题
　　如不复用Flutter引擎，除此外还有其他场景也会导致内存激增
　　混合栈中存在多个flutter界面
　　原生tab中存在多个Flutter界面
　　多个Flutterviews同时存在，比如列表中每个cell都是Flutterview
　　那官方Flutter引擎是否类的方案？
　　Flutter官方在2020年也推出了轻量级多引擎的技术方案：http：flutter。devgomultipleengines
　　轻量级多引擎方案使用的场景
　　混合栈应用中多个flutter界面
　　原生tab中存在多个Flutter界面
　　多个Flutterviews同时存在，比如列表中每个cell都是Flutterview
　　方案的初衷是在底层对某些如下的资源类进行共享：
　　1。ThreadsHost（线程）
　　2。SkiaContexts（Skia绘制上下文）
　　3。GraphicsContexts（图像绘制上下文本）
　　4。ImageCaches（图片缓存）
　　5。IsolateGroups（Dart的isolate）
　　6。Fonts（字体）
　　这个方案中需要注意点是，两个引擎中的isolate是不共享的。
　　这种方案正因为各个界面view中的因为不共享isolate的缘故。引擎之间的变量是无法共享的。随之绑定到isolate的对象也存在有多份。
　　为能和原来闲鱼的整个逻辑兼容，使业务平滑无感迁移，多引擎共享isolate方案势在必行。
　　基于共享isolate的Flutter多引擎方案
　　修改后C侧代码
　　引擎A和引擎B有各自的shell，Engine，Window对象实例，且不同的引擎使用applicationid来标记。他们之间共享isolate。
　　Application
　　这里我们称创建出来的多个引擎称为不同Application，每个引擎用不同ApplicationId标识。
　　不同Application使用自己的渲染管线，这样就达到了不同引擎的渲染流程既互不影响。但有因为运行在同一个isolate下，业务代码自己的单例、数据等能互相访问。
　　c层支持后，在调用dart侧的入口函数时，带上applicationid，传递到Dart侧的入口main函数boolDartIsolate：：InvokeEntryPointInSharedIsolate（
　　std：：uniqueptrPlatformConfigurationplatformconfiguration，
　　std：：optionalstd：：stringlibraryname，
　　std：：optionalstd：：stringentrypoint，
　　conststd：：vectorstd：：stringargs）｛
　　tonic：：DartState：：Scopescope（this）；
　　int64
　　。。。。
　　if（！InvokeMainEntrypoint（userentrypointfunction，entrypointargs，
　　applicationid））｛
　　
　　｝
　　
　　｝
　　dart代码单例问题
　　在原来Fltuter引擎framework层中存在多个单例如window，Bindings，PlatformDispatcher，如何解决不同Application访问自己的单例？
　　使用Application。current获取当前application后再访问具体单例对象。以window为例SingletonFlutterWindowgetwindowApplication。current。get（
　　SingletonFlutterWindow，
　　SingletonFlutterWindow。（0，PlatformDispatcher。instance）
　　）；
　　再dart层的渲染计算后，最终还会将渲染树数据调用回到的c层。在回调到c函数时，也需要带上applicationIdplatformconfiguration。cc
　　voidRender（DartNativeArgumentsargs）｛
　　UIDartState：：ThrowIfUIOperationsP
　　DartH
　　int64tapplicationid
　　tonic：：DartConverterint：：FromArguments（args，1，exception）；
　　Scenescene
　　tonic：：DartConverterScene：：FromArguments（args，2，exception）；
　　if（exception）｛
　　DartThrowException（exception）；
　　
　　｝
　　UIDartState：：Current
　　platformconfiguration（applicationid）
　　client
　　Render（scene）；
　　｝
　　自此从flutter的Dart函数入口，到dart函数内部调用渲染流程，最后调用回到c层，都有applicatinId去标识不同的引擎。
　　这样就做到多个引擎之间既能渲染相互隔离，但内部又能访问的结果。
　　总结
　　最后看下完成后的效果视频截图
　　横竖屏切换
　　分屏导航模式
　　分屏比价模式
　　Flutter多引擎特性除了能应用到iPad场景外，还能应用到Android折叠屏场景。目前这部分的工作也在有序过程中。自定义NavigationViewController以及Flutter引擎的修改工作，也会在性能稳定后开源到社区共建。
　　闲鱼iPad版发布工作还在紧张灰度中，欢迎大家继续关注。
　　引用资料supportingmultiplewindowsonipadhttps：developer。apple。comdocumentationuikituiscenedelegatesupportingmultiplewindowsonipad
　　LightweightFlutterengine：https：docs。google。comdocumentd1NwiZPWHd1te46eP2GWwIezDV9CdMQkODAMuF5kWdtLwedithttps：developer。apple。comdocumentationuikitviewcontrollerscreatingacustomcontainerviewcontroller
　　https：developer。apple。comlibraryarchivefeaturedarticlesViewControllerPGforiPhoneOSImplementingaContainerViewController。html