Flutter Navigator 2.0场景下如何自定义部分页面的跳转过渡动画

问题解答 #

你需要在创建Page实例的步骤做修改，不需要调整现有Navigator的配置，具体方案如下：

• 首先纠正你对page_transition包的用法误解：该库返回的PageTransition本身就是Page类的子类，和你当前用的MaterialPage是同级关系，不需要嵌套进MaterialPage的child参数里，直接替换原有MaterialPage即可，完全符合pages数组的类型要求。
• 具体实现逻辑：
  生成Page实例时，先判断当前页面是否需要自定义过渡效果，不需要的页面继续沿用原有的MaterialPage逻辑，需要自定义过渡的页面直接返回PageTransition实例：

  // 无需自定义过渡的页面
  if (pageNeedDefaultTransition(pageName)) {
    return MaterialPage(
      child: SomePage(),
      key: keyName,
      name: pageName,
      arguments: routeSettings.arguments,
    );
  }
  
  // 需要自定义过渡的页面，直接返回PageTransition
  return PageTransition(
    type: PageTransitionType.rightToLeft, // 按需选择过渡动画类型
    child: SomePage(),
    settings: RouteSettings(
      key: keyName,
      name: pageName,
      arguments: routeSettings.arguments,
    ),
  );
  

• 生成的PageTransition实例可以直接加入你现有的_pages数组，调用notifyListeners()后就会自动生效，原有的Navigator配置不需要做任何改动。

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