如何用 Navigator 2.0 替换动画页面？

Posted 2023-02-23

【中文标题】如何用 Navigator 2.0 替换动画页面？

【英文标题】：How to replace page animated with Navigator 2.0?

【发布时间】：2021-10-25 23:32:00

【问题描述】：

我正在通过更改 pages 集合中的项目导航到另一个页面。

final page = ...
return Scaffold(
            body: Navigator(
              onPopPage: (Route<dynamic> route, dynamic result) 
                return route.didPop(result);
              ,
              pages: [
                MaterialPage(child: page),
              ],
            ),
...

并且在这种情况下没有过渡动画（至少在 ios 上）。当我向集合中添加页面时 - 动画出现。但我不需要页面堆栈。如何解决？

【参考方案1】：

更改页面时更改key参数。

例子：

final page = condition 
  ? MaterialPage(key: ValueKey('page1'), child: page1)
  : MaterialPage(key: ValueKey('page2'), child: page2);

return Scaffold(
            body: Navigator(
              onPopPage: (Route<dynamic> route, dynamic result) 
                return route.didPop(result);
              ,
              pages: [
                page,
              ],
            ),