使用 go_router 推送一个透明页面?

huangapple go评论78阅读模式
英文:

Push a transparent page with go_router?

问题

为了显示覆盖我的shellroute的抽屉,我需要在我的页面堆栈顶部推送一个半透明的页面。到目前为止,当我使用

GoRouter.of(rootNavigatorKey.currentContext!).pushNamed('myDrawer');

时,背景仍然不透明。我找到了一个办法,使用传统的Navigator和PageRouteBuilder:

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

在使用go_router时,是否有一种方式可以使用类似opaque参数的选项来推送路由?

英文:

In order show a drawer that covers my shellroute, i need to push a semi-transparent page on top of my page stack. So far the background remain opaque when i use the

GoRouter.of(rootNavigatorKey.currentContext!).pushNamed('myDrawer');

I have found a ruse using the traditional Navigator and PageRouteBuilder :

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

Is there a way to use an option like the opaque parameter, with go_router, when pushing routes ?

答案1

得分: 2

你可以使用CustomTransitionPage。在你的应用程序中,需要找到定义GoRouter实例的位置,并按照以下方式将其添加到路由列表中:

GoRoute(
  path: '/myDrawer',
  name: 'myDrawer',
  pageBuilder: (context, state) => CustomTransitionPage(
    fullscreenDialog: true,
    opaque: false,
    transitionsBuilder: (_, __, ___, child) => child,
    child: const MyDrawer(),
  ),
)
英文:

You can use CustomTransitionPage for that. You'll have to go to where the GoRouter instance of your app is defined and add it like below to list of routes:

GoRoute(
       path: '/myDrawer',
       name: 'myDrawer',
       pageBuilder: (context, state) => CustomTransitionPage(
           fullscreenDialog: true,
           opaque: false,
           transitionsBuilder: (_, __, ___, child) => child,
           child: const MyDrawer(),
       ),
)

huangapple
  • 本文由 发表于 2023年4月6日 21:09:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/75949913.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定