如何用GoRouter实现多页面实时预览与全屏切换功能？

一、直接实例化页面组件做实时预览（最简便） #

放弃静态图方案，直接在概览页中实例化各功能模块的根页面组件，用固定尺寸容器包裹，实现实时内容展示：

• 在顶层GoRouter中新增/overview命名路由，保留原有feature1、feature2等所有路由的命名配置。
• 概览页组件内，用Card或Container给每个功能页面（如Feature1()、Feature2()）设置预览尺寸（比如宽200、高300），添加点击事件，点击时调用context.goNamed('feature1')跳转到对应全屏页面。
• 在各功能页面的底部导航栏添加「返回概览」按钮，点击触发context.goNamed('overview')。

注意：如果功能页面依赖路由参数，在概览页实例化时要传递必要参数；若需预览与全屏页面共享状态，必须用全局状态管理（Provider/Riverpod/Bloc），避免状态割裂。

二、改造ShellRoute实现模式切换 #

基于现有ShellRoute结构，通过路由参数控制显示模式：

• 将ShellRoute的根组件改为可切换模式的容器（比如Stack），默认显示全屏子页面，切换到概览模式时显示预览层。
• 给ShellRoute添加路由参数（如mode，可选fullscreen/overview），在builder中根据参数决定渲染全屏内容还是概览预览。
• 概览模式下同样实例化各功能根页面作为预览，点击预览时更新路由参数为fullscreen并跳转到对应功能路由。

这种方式无需新增大量路由，能复用现有ShellRoute结构，但同样依赖全局状态管理实现状态同步。

三、子GoRouter方案的可行性与注意点 #

子GoRouter方案确实可行，但需要处理跨分支跳转的细节：

• 给每个子GoRouter分配独立的GlobalKey<NavigatorState>，跨分支跳转时通过键获取对应导航器执行操作。
• 顶层GoRouter负责管理概览页和各功能的入口路由，子GoRouter处理各自功能的内部路由（如/feature1/a由feature1的子GoRouter接管）。
• 跨功能跳转时，需先通过顶层GoRouter跳转到目标功能的入口，再由子GoRouter处理内部路由逻辑。该方案适合大型应用，能隔离各功能的路由逻辑，但实现复杂度较高。

核心注意事项 #

• 状态同步：实时预览的核心是状态共享，必须将页面状态抽离到全局状态容器，不能让预览和全屏组件各自维护独立状态。
• 路由规范：统一使用命名路由（goNamed）跳转，避免路径拼写错误；用extra或queryParams传递模式、参数等信息。
• 性能优化：预览数量较多时，用AutomaticKeepAliveClientMixin保持组件状态，或用VisibilityDetector在组件不可见时暂停渲染，避免性能损耗。

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