如何使用GoRouter推送半透明页面以覆盖ShellRoute？

我需要在页面栈顶部推送一个半透明页面，用来显示覆盖ShellRoute的抽屉。但使用GoRouter.of(rootNavigatorKey.currentContext!).pushNamed('myDrawer');时，背景仍为不透明状态。目前我通过传统Navigator结合PageRouteBuilder实现了需求：

Navigator.of(rootNavigatorKey.currentContext!).push(
  PageRouteBuilder(
    fullscreenDialog: true,
    opaque: false,
    pageBuilder: (_, __, ___) => MyDrawer(),
  ),
);

请问使用GoRouter推送路由时，是否有类似opaque参数的配置选项？

有的，GoRouter允许你在定义路由时通过自定义Page组件来设置opaque属性，具体可以通过以下两种方式实现：

• 方式一：使用MaterialPage并指定opaque参数
  在路由定义中，将pageBuilder返回的MaterialPage的opaque设为false，同时可设置fullscreenDialog为true：

GoRoute(
  path: '/myDrawer',
  pageBuilder: (context, state) => MaterialPage(
    fullscreenDialog: true,
    opaque: false,
    child: MyDrawer(),
  ),
)

• 方式二：使用CustomTransitionPage（支持自定义过渡动画）
  如果需要自定义页面过渡效果，可使用CustomTransitionPage，同样设置opaque: false：

GoRoute(
  path: '/myDrawer',
  pageBuilder: (context, state) => CustomTransitionPage(
    fullscreenDialog: true,
    opaque: false,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 示例：淡入淡出过渡动画
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
    child: MyDrawer(),
  ),
)

配置完成后，调用pushNamed('myDrawer')就能推送出半透明页面，背景会显示下方的ShellRoute内容，和传统Navigator实现的效果一致。

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