Loading... ## Flutter 如何引入到原生工程 ### Android 1. FlutterActivity 2. FlutterFragement 3. FlutterView ### iOS 1.FlutterViewController FlutterView 的方式集成需要做的更多，因为它是一个 View 所以不能访问 Activity 级别的事件，需要手动维护与 Flutter Engine 的桥接。 ## 混合路由栈 在混合项目中，一定会出现 Flutter 与原生页面互相跳转的情况，而原生与 Flutter 各自实现了一套路由方案，原生平台使用的是单容器单页面，一个 VC 或 Activity 对应一个原生页面，而 Flutter 是采用的单容器多页面，一个 VC 或 Activity 对应多个原生页面。所以在混合开发中会存在两套路由栈，分别是原生路由栈以及 Flutter 内部路由栈。 ```mermaid graph LR NativeA[原生页面 NativeA] --> FlutterContainer[启动 Flutter 容器] subgraph Flutter 容器 FlutterContainer --> FlutterPageA[Flutter 页面 A] FlutterPageA --> FlutterPageB[Flutter 页面 B] end FlutterPageB --> NativeB[原生页面 NativeB] ``` ## 原生页面跳转 Flutter 原生跳转 Flutter 页面相对比较简单，因为对于原生来说 Flutter 页面本质也是一个 VC/Activity 所以只需要按照正常的跳转方式跳转即可。但是对于安卓来说可能需要多一些步骤，因为 Flutter 的入口页面是一个 View 而不是 Activity。 ## Flutter 跳转原生 相比于原生跳转 Flutter，从 Flutter 页面跳转到原生显然需要做的更多，主要需要考虑到两种场景**从 Flutter 页面打开原生页面**，**从 Flutter 页面回到原生页面**。 而 Flutter 并没有直接提供操作原生页面的方法，所以我们需要使用 PlatformChannel 来实现。需要注意的点是，Flutter 容器本身属于原生路由栈的一部分，所以当 Flutter 的根页面需要返回时，需要额外处理 Flutter 容器关闭的的问题。 ### 侧滑返回手势 #### iOS 侧滑返回手势在 iOS 7 中引入，用户可以通过向右滑动页面来进行返回，同时可以看到上一页的内容，这种侧滑返回的行为本质上是附加在页面上的手势行为，所以并没有那么的“系统”，而在 Flutter 与 iOS 的混合开发中，当 Flutter 的 vc 中存在内部路由，则会出现预期行为不一致的情况，因为 vc 自带的 `GestureRecognizer` 侧滑手势比 Flutter 内部的侧滑手势 `touchXX` 优先级更高，所以会导致 Flutter 无法收到手势，一种比较简单的解决方案是，创建一个 MethodChannel 来关闭/开启 iOS 的原生侧滑手势监听，在 Flutter 页面内监听路由栈，当路由栈中路由数量大于 1，说明存在 Flutter 的内部路由，这时需要关闭 iOS 的原生手势，当路由栈中路由数量等于 1，说明位于 Flutter 的根页面，这是需要开启 iOS 的原生手势，来关闭 Flutter 容器。另一种方式可以自定义 `GestureRecognizer` 通过手势竞技场机制来实现。 #### Android 从安卓一开始就配有实体的返回按键，之后发展到虚拟导航按键（三大金刚键），再到现在的全面屏手势，在安卓上，不管是侧滑返回还是实体按键返回，都更像是一种“系统”行为，因为你可以在任何位置触发返回操作，即使页面上没有任何可以返回的内容。在 Flutter 与 Android 的混合开发中，Flutter 页面作为一个 Activity 存在，而 Activity 的默认返回行为是 `finish()` ，即关闭容器，所以当 Flutter 页面通过 Fragment 引入原生且存在内部路由时，触发返回手势就会直接关闭整个 Activity，而不是优先关闭 Flutter 的内部路由。解决方案也很简单，Flutter 作为成熟的框架，肯定考虑到了这些情况，FlutterFragment 有一个`onBackPressed()` 方法，只需要将这个方法使用 `requireActivity().onBackPressedDispatcher.addCallback` 附加到当前 Fragment 关联的 Activity 即可。 ##### 预测式返回手势 为了更好的返回体验（肯定不是抄 iOS），Android 13 中引入了一种全新的返回手势，Predictive Back（预测式返回）。 <div class="tip inlineBlock info"> [相关 PR flutter/pull/161545](https://github.com/flutter/flutter/pull/161545) </div> ## PopScope iOS 与 Android 从交互逻辑上的差异导致行为不一致。 <div class="tip inlineBlock info"> [相关 PR flutter/issues/138624](https://github.com/flutter/flutter/issues/138624) </div> © 允许规范转载 打赏 赞赏作者 微信 赞
