flutter 我如何隐藏ShellRoute的底部导航器？

92vpleto 于 2023-01-06 发布在 Flutter

关注(0)|答案(3)|浏览(279)

我正在创建一个带有底部导航器的应用程序。我使用了一个ShellRoute，但我们的要求是在屏幕上隐藏底部导航器。例如：当我转到另一个屏幕（如用户配置文件页面）时，主页可以有底部导航器，我必须隐藏底部导航器，但我在同一个ShellRoute中使用ShellRoute和子路由，它不会隐藏底部导航器。

ShellRoute(
          navigatorKey: _shellNavigatorKey,
          builder: (context, state, child) {
            return MainScreen(child: child);
          },
          routes: [
            GoRoute(
              path: '/$dashboardRouteName',
              name: dashboardRouteName,
              pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                key: UniqueKey(),
                child: const DashboardScreen(),
              ),
              routes: [
                GoRoute(
                  path: leaveRequestRouteName,
                  name: '$dashboardRouteName/$leaveRequestRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const LeaveRequestScreen(),
                  ),
                ),
                GoRoute(
                  path: switchHolidayRouteName,
                  name: '$dashboardRouteName/$switchHolidayRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const SwitchHolidayScreen(),
                  ),
                ),
              ],
            ),

然后，我将子路由分解为如下的总路由：

ShellRoute(
          navigatorKey: _shellNavigatorKey,
          builder: (context, state, child) {
            return MainScreen(child: child);
          },
          routes: [
            GoRoute(
              path: '/$dashboardRouteName',
              name: dashboardRouteName,
              pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                key: UniqueKey(),
                child: const DashboardScreen(),
              ),
            ),
....
 GoRoute(
          path: '/$switchHolidayRouteName',
          name: switchHolidayRouteName,
          pageBuilder: (context, state) => CustomPageRouteBuilder.route(
            key: state.pageKey,
            child: const SwitchHolidayScreen(),
          ),
        ),
        GoRoute(
          path: '/$leaveRequestRouteName',
          name: leaveRequestRouteName,
          pageBuilder: (context, state) => CustomPageRouteBuilder.route(
            key: state.pageKey,
            child: const LeaveRequestScreen(),
          ),
        ),

我使用context.go()，它工作正常，但我无法使用context.pop()返回上一屏幕。
有人知道吗？

flutter

来源：https://stackoverflow.com/questions/74304446/how-i-can-hide-bottom-navigator-on-shellroute

3条答案

按热度按时间

5sxhfpxr1#

我试过这种方法，它工作。使用_navigatorKey和parentnavigatorKey

final _navigatorKey = GlobalKey<NavigatorState>();
final _shellNavigatorKey = GlobalKey<NavigatorState>();
...
ShellRoute(
          navigatorKey: _shellNavigatorKey,
          builder: (context, state, child) {
            return MainScreen(child: child);
          },
          routes: [
            GoRoute(
              path: '/$dashboardRouteName',
              name: dashboardRouteName,
              pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                key: UniqueKey(),
                child: const DashboardScreen(),
              ),
              routes: [
                GoRoute(
                  path: leaveRequestRouteName,
                  parentNavigatorKey: _navigatorKey,
                  name: '$dashboardRouteName/$leaveRequestRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const LeaveRequestScreen(),
                  ),
                ),
                GoRoute(
                  path: switchHolidayRouteName,
                  parentNavigatorKey: _navigatorKey,
                  name: '$dashboardRouteName/$switchHolidayRouteName',
                  pageBuilder: (context, state) => CustomPageRouteBuilder.route(
                    key: state.pageKey,
                    child: const SwitchHolidayScreen(),
                  ),
                ),
              ],
            ),

赞(0）回复(0）举报 2023-01-06

7cwmlq892#

在定义导航栏主屏幕中，使用GoRouter.of(context).location检查当前位置。如果您的位置不在bottomNavigationBar应该显示的位置，则返回Sizedbox或null，否则返回BottomNavigationBar。

@override
  Widget build(BuildContext context) {
    final location = GoRouter.of(context).location;
    print('goRouter Location $location');
    return Scaffold(
      body: widget.child,
      bottomNavigationBar: location != '/home' ? null : BottomNavigationBar(),
    );
  }

赞(0）回复(0）举报 2023-01-06

tzdcorbm3#

这通常发生在page不知道它的父对象的时候。
指定在GoRoute中使用parentNavigatorKey

代码结构：

final _parentKey = GlobalKey<NavigatorState>();
final _shellKey = GlobalKey<NavigatorState>();

|_ GoRoute
 |_ parentNavigatorKey = _parentKey   👈 Specify key here
|_ ShellRoute
 |_ GoRoute
  |_ parentNavigatorKey = _shellKey   👈 Specify key here
 |_ GoRoute
  |_ parentNavigatorKey = _shellKey   👈 Specify key here

建议

您的当前代码：

|_ShellKey
  |_GoRoute // needs bottomNav
  |_GoRoute // needs bottomNav
  |_GoRoute // doesn't need bottomNav

将其更改为：

|_ShellKey
  |_GoRoute // needs bottomNav
  |_GoRoute // needs bottomNav
|_GoRoute // doesn't need bottomNav 👈 Try to keep it outside the ShellKey

使用ShellRoute和GoRouterhere参考底部导航栏的详细代码和说明 *

赞(0）回复(0）举报 2023-01-06

我来回答

flutter 我如何隐藏ShellRoute的底部导航器？

3条答案

代码结构：

建议

您的当前代码：

将其更改为：

相关问题

热门标签

最新问答