Flutter使用page_transition时如何通过单次返回点击回退多个页面

核心逻辑 #

你之前尝试的方案不符合需求的核心原因是没有基于原有页面栈做弹出操作，而是修改/替换了栈结构，正确方案使用Navigator.popUntil实现需求，既不破坏原有栈结构，也能保留你配置的页面切换动画。

具体实现 #

方案1：基于命名路由实现（推荐） #

• 首先在MaterialApp中注册所有页面的路由标识

MaterialApp(
  initialRoute: '/join_test',
  routes: {
    '/join_test': (context) => JoinTestPage(),
    '/rule': (context) => RulePage(),
    '/question_set': (context) => QuestionSetPage(),
    '/answer_check': (context) => AnswerCheckPage(),
    '/success': (context) => SuccessPage(),
  },
);

• 所有页面跳转依然保持原有Navigator.push逻辑即可，不需要修改
• 在成功页的返回按钮点击事件中添加如下代码

onTap: () {
  // 弹出路由栈中 /rule 之上的所有页面，停在规则页
  Navigator.popUntil(context, ModalRoute.withName('/rule'));
}

方案2：无命名路由适配 #

如果你没有使用全局命名路由，只需在跳转规则页时给路由添加唯一标识即可：

• 跳转规则页时给RouteSettings配置name参数

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => RulePage(),
    settings: const RouteSettings(name: 'rule_page'),
  ),
);

• 成功页返回逻辑保持和方案1一致，匹配对应name即可

onTap: () {
  Navigator.popUntil(context, ModalRoute.withName('rule_page'));
}

方案优势 #

• 原有页面栈结构保持为「参加测试 → 规则」，后续点击返回键会正常回到参加测试页，不会出现空白问题
• 完全复用系统/你配置的page_transition回退动画，不会出现动画失效问题
• 不需要修改原有页面的跳转逻辑，侵入性极低

过往方案问题说明 #

使用pushReplacement时是替换当前页面栈顶元素，不是栈弹出逻辑，自然不会触发正常的回退动画；使用pushAndRemoveUntil出现空白页是因为你配置的移除条件错误，把规则页之下的参加测试页也一起移除了，导致栈底为空。

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