Flutter Navigator局部页面切换实践

在Flutter中，页面切换是通过Navigator实现的， 那么能否考虑将Navigator用于局部页面切换呢？答案是肯定的。本文将重点介绍使用Navigator进行局部页面切换，以及在使用的过程中碰到的一些问题和解决方案。由于业务中目前使用的Flutter版本为v1.12.13，所以本文也会基于这个版本进行分析。

从源码可知：

从2.1节可知，Navigator 是一个StatefulWidget，正常情形下，StatefulWidget是在build里面使用的，但是，我们在平时开发页面的过程中，build里面是没有使用到Navigator的，那么它是在哪里使用的呢？

查看MaterialApp源码，可以发现在它的build里面创建了WidgetsApp，在WidgetsApp的build方法里面创建了Navigator，部分代码如下：

所以Navigator是使用在MaterialApp的build方法里的，而MaterialApp是在app初始化调用runApp方法时创建的Widget中返回的，所以在App初始化的时候，就初始化了一个Navigator组件，用于管理Flutter页面。综上，可以得出如图3所示的Flutter app结构图：

图3  Flutter app结构示意图

根据前文可知，Navigator 是一个StatefulWidget，所以可以直接使用Navigator组件进行局部页面切换。以图1这种页面为例，页面是一个左右排列结构，页面的左边部分存在局部页面切换，那么可以返回一个Row组件，左边使用Navigator，右边返回其他widget。页面结构图如图4所示：

图中，MainPage表示的是整个主页面，左边是需要切换的页面，使用Navigator组件，它的子页面使用SubPage表示，SubPage1表示第一个子页面，SubPage2表示第二个子页面。整个页面对应的示例代码如下：

上述代码中，Navigator里面添加了子页面1，如果需要由子页面1切换到子页面2，只需要在子页面1里面调用Navigator.push即可：

从第二个子页面返回第一个子页面， 则可以直接使用Navigator.pop(context, result)。

了解Navigator的使用方式之后，就可以在业务中正常使用Navigator了。在我们的业务中，涉及到页面切换的场景除了图1所示的之外，还有弹窗(Dialog)中切换页面(如图5所示)，抽屉(Drawer)中切换页面等，在使用Navigator进行局部页面切换的过程中，我们也碰到了各种各样的问题。下文中，我们会以弹窗(Dialog)场景中切换页面为例来将介绍一下这些问题、问题出现的原因以及解决方法。

碰到的第一个问题就是切换页面时的动画问题。一般而言，Flutter页面切换时，新的页面会从屏幕的右端或者底部平移出来，正常情形下，这样是完全没问题的。但当我们使用Navigator组件时，我们的视图可能在屏幕中的任何位置，此时，新页面再从右端或者底部平移出来，体验可能就不太友好了。如图5所示，页面切换时，新页面从屏幕底部出来，而不是弹窗的底部出来，在视觉上屏幕底部出现了闪烁：

这个问题是由MaterialPageRoute导致的，它封装了使用了Material主题的动画，在Navigator.push时使用MaterialPageRoute就会出现图5所示的动画效果。可以使用PageRouteBuilder或者自定义Route来替换MaterialPageRoute，然后自定义页面切换的动画效果来避免这个问题。动画效果可以使用Flutter官方的动画效果，比如FadeTransition可以实现alpha切换效果、ScaleTransition可以实现缩放效果、SlideTransition可以实现平移效果等。下面是一个使用PageRouteBuilder结合FadeTransition动画实现alpha切换的示例：

除了alpha切换，在我们的应用中，从屏幕左侧进入或者底部进入也是比较常见的场景。正常情形下，这种平移动画可以使用SlideTransition，但是当我们在Navigator push时使用SlideTransition后发现实现的效果会和图5类似，新的页面会从Navigator组件之外平移进Navigator里，这种效果显然是不理想的，需要考虑使用别的方案来替代SlideTransition。

参考上面调用FadeTransition的方式，我们调用ScaleYTransition，就可以实现从底部切入的效果了，如图6所示：

同理，固定y值，就可以实现水平方向的缩放动画，具体效果可以参考图1。

解决了动画问题之后，使用Navigator就可以正常进行局部页面的切换了。当我们进入页面之后点击弹窗的关闭按钮时，出现了一个新问题，具体现象为：点击关闭之后弹窗没有消失，但是弹窗内容变成了空白页面(如图7所示)。其中关闭弹窗调用的方法是Navigator.pop(context)。

查看Navigator.pop(context)源码，发现它调用方法Navigator.of(context).pop()，查看Navigator.of(context)这个方法，源码如下：

这里面有个重要的参数rootNavigator：

根据前文可知，此时，Flutter app中存在两个Navigator，第一个Navigator为WidgetsApp中创建的Navigator，它用于管理主页面，第二个 Navigator为局部页面切换时使用Navigator，它用于管理子页面。此时，app结构图可以可以简化为如图8所示的结构：

对照Navigator.of(context)这个方法和图8所示的结构图可知，在子页面里调用Navigator.of(context)这个方法时，如果rootNavigator为false，就会查找到最近一个Navigator，也就是局部页面切换所使用的Navigator(下文中，将称该Navigator为子Navigator)。当rootNavigator传为true时，会递归查找到最顶层的Navigator，即WidgetsApp里的Navigator(下文中，将称该Navigator为RootNavigator)。

在Flutter开发中，由于Android设备存在返回键，所以需要考虑Android设备的返回事件，通常使用WillPopScope来处理返回事件。我们发现，在使用Navigator进行子页面切换时，子页面不会响应返回事件，具体现象为：在Android设备上，进入主页面，子页面1使用Navigator.push跳转到子页面2之后按下系统的返回键时，不会由子页面2返回到子页面1，反而是主页面退出了，效果如图9所示（设备使用的是华为Matepad，系统导航方式使用的是手势导航，从屏幕右边滑动时执行返回操作）：

从现象来看，系统调用了Navigator的pop方法，但是调用的却不是子Navigator的pop方法，而是RootNavigator的pop方法。在4.2节中，我们通过添加rootNavigator参数可以指定调用哪个Navigator，在这个地方是否可以参照这个方法让子Navigator响应返回事件呢？

查看链路中的方法，发现决定调用哪个Navigator的方法为_WidgetsAppState里的didPopRoute()，方法部分代码如下：

查看源码可知，调用maybePop的navigator由WidgetsApp initState时创建，同时，只在WidgetsApp调用didUpdateWidget才会更新。所以，目前来看，没有办法通过传参来指定Navigator。

具体示例代码如下：

参照这种方法，我们实现的最终效果如图11所示，按返回时可以正常返回到上一级页面了。

图11   子页面响应返回事件效果图

本文详细介绍了使用Navigator进行局部页面切换的方法，使用过程中碰到的一些问题以及解决方法。