导航栏后面的底页

Question

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

我正在尝试显示从底部导航栏后面出现的底部工作表。此外，我想看看障碍。只有底部导航栏和底部页应该清晰可见，而屏幕的其余部分必须变暗。(有点像这样(。

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

我已经看到了许多建议将showModalBottomSheet与useRootNavigator: true结合使用的答案。再说一遍，没用。

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

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

GetX包：https://pub.dev/packages/get显示ModalBottomSheet

源代码示例：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'));
},
);