使用PageRouteBuilder自定义页面动画后Navigator.pop()返回黑屏如何解决

使用PageRouteBuilder()实现自定义无动画页面路由时出现黑屏异常：

• 未使用自定义动画时，路由跳转、返回逻辑完全正常
• 添加自定义动画配置后，Navigator.push()正向跳转可正常执行
• 执行pop操作返回上一页时，页面出现黑屏

// 底部导航栏跳转按钮逻辑
NavigationBarButton(
  icon: Icons.people,
  title: 'My Network',
  isActive: widget.activeScreen == MyNetworkScreen.screen_id ? true : false,
  onPressed: () {
    if (ModalRoute.of(context)!.settings.name == HomeScreen.screen_id) {
      Navigator.of(context).push(_noAnimationBuilder(
        page: MyNetworkScreen(),
        pageName: MyNetworkScreen.screen_id,
      ));
    } else if (ModalRoute.of(context)!.settings.name == MyNetworkScreen.screen_id) {
      // 当前已在目标页，无操作
    } else {
      Navigator.of(context).pushReplacement(_noAnimationBuilder(
        page: MyNetworkScreen(),
        pageName: MyNetworkScreen.screen_id));
    }
  },
),


// 自定义无动画路由实现
Route _noAnimationBuilder({required Widget page, required String pageName}) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

两个核心问题导致返回黑屏：

1. 定义_noAnimationBuilder时接收了pageName参数，但没有传给PageRouteBuilder的settings属性，路由栈无法正确记录每个路由的标识，会导致路由层级匹配、渲染异常
2. 仅在transitionsBuilder中直接返回child，没有配置正向、反向动画时长，pop返回时路由过渡的渲染流程没有被正确截断，会出现短暂的渲染空窗也就是黑屏

修改_noAnimationBuilder实现，补全路由settings配置，同时将正向、反向过渡时长都设为0，直接跳过动画渲染流程，从根源避免动画过渡阶段的渲染异常：

Route _noAnimationBuilder({required Widget page, required String pageName}) {
  return PageRouteBuilder(
    // 补全路由配置，绑定路由名称
    settings: RouteSettings(name: pageName),
    // 正向跳转、反向返回的动画时长都设为0，完全禁用过渡动画
    transitionDuration: Duration.zero,
    reverseTransitionDuration: Duration.zero,
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 无动画场景直接返回子组件即可，不需要做动画插值处理
      return child;
    },
  );
}

替换原有路由方法后，跳转、返回都不会再出现黑屏问题。

内容的提问来源于stack exchange，提问作者Olumide