导航栏后面的底页

Question

我有一个带有底部导航栏和一个浮动操作按钮的屏幕。

我正在尝试显示从底部导航栏后面出现的底部工作表。 另外，我想看看障碍。 只有底部导航栏和底部工作表应该清晰可见，而屏幕的 rest 必须变暗。 （ 这种）。

对于导航，我使用的是GetX ，所以首先我尝试将useRootNavigator: true指定为Get.bottomSheet ，但没有奏效。

我已经看到许多建议将showModalBottomSheet与useRootNavigator: true一起使用的答案。 再次，没有工作。

我已经通过自定义解决方案（在此处发布）实现了这一点，但我想了解什么会抑制useRootNavigator的效果，或者是否有其他内置解决方案可以实现我的目标。

LE：我在打简单的电话，没什么特别的。 参考以下文档。

GetX package: https://pub.dev/packages/get showModalBottomSheet

源代码示例： https://gist.github.com/alexgrusu/8fd173e56d4046cdbda487e4b98bd950

Answer 1

这种行为的解决方案可以通过嵌套导航来实现。

首先，定义导航器的键。

class NavigatorKeys {
  static final GlobalKey<NavigatorState> mainNavigatorKey = GlobalKey();
  static final GlobalKey<NavigatorState> secondaryNavigatorKey =
      GlobalKey();
}

主键可以分配给MaterialApp的navigatorKey 。

接下来，让我们考虑我们的应用程序的主页是仪表板屏幕，因此我们的MaterialApp看起来像这样。

MaterialApp(
   title: 'Demo App',
   home: const DashboardScreen(),
   navigatorKey: NavigatorKeys.mainNavigatorKey,
);

然后，可以实现DashboardScreen的构建方法，如下所示。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: NavigatorKeys.secondaryNavigatorKey,
        onGenerateRoute: (routeSettings) {
          return MaterialPageRoute(
            builder: (context) =>
                  _buildMainUi(),
                );
              },
            ),
          );
        },
      ),
      bottomNavigationBar: _buildNavigationBar(),
    );
  }

  _buildMainUi() => Scaffold(body: Center(child: Text('Dashboard')));

最后，只需将辅助导航器的上下文传递给showModalBottomSheet方法并将useRootNavigator设置为false 。

  showModalBottomSheet<Widget?>(
      useRootNavigator: false,
      context: NavigatorKeys.secondaryNavigatorKey.currentContext!,
      builder: (BuildContext context) {
        return Container(height: 200, child: Text('hello'));
      },
    );