Flutter页面跳转时如何清除指定页面并返回源页面？

场景回顾 #

页面结构：

• Screen A：登录页面
• Screen B：主页（源页面）
• Screen C、D：中间页面
• Screen E：目标页面

跳转流程：Screen B → Screen C → Screen D → Screen E

需求：

1. 正常返回（返回键或按钮）时，跳转至上一页面且保留页面数据
2. 在Screen E点击按钮时，清除Screen C、D、E，回到原Screen B页面

实现步骤 #

1. 给主页Screen B设置路由标识 #

为精准定位Screen B的路由，在创建其路由时添加RouteSettings指定唯一名称：

从登录页Screen A跳转到Screen B的示例：

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => const ScreenB(),
    settings: const RouteSettings(name: '/screenB'),
  ),
);

若Screen B是App初始页面，可在MaterialApp中配置路由表：

MaterialApp(
  initialRoute: '/screenB',
  routes: {
    '/screenB': (context) => const ScreenB(),
  },
);

2. 正常页面跳转（保留返回栈） #

Screen B→C、C→D、D→E的跳转使用普通Navigator.push，确保每个页面加入路由栈，返回时可通过Navigator.pop或系统返回键回到上一页面，页面状态自动保留：

// Screen B 跳转到 Screen C
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenC()),
);

// Screen C 跳转到 Screen D
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenD()),
);

// Screen D 跳转到 Screen E
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const ScreenE()),
);

3. 从Screen E清除中间页面返回Screen B #

在Screen E的按钮点击事件中，使用Navigator.popUntil方法，弹出路由栈中Screen B之上的所有页面（C、D、E），直接回到原Screen B：

ElevatedButton(
  onPressed: () {
    // 持续弹出栈顶页面，直到匹配到Screen B的路由
    Navigator.popUntil(context, ModalRoute.withName('/screenB'));
  },
  child: const Text('返回主页'),
);

原理说明 #

• 普通push操作会将新页面压入路由栈，栈结构为[Screen B, Screen C, Screen D, Screen E]，pop操作仅弹出栈顶页面，因此能保留之前页面的状态数据。
• popUntil会循环弹出栈顶页面，直到匹配到指定路由，执行后栈结构回到[Screen B]，实现清除中间页面并返回原主页的需求。

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