Flutter：在底部导航栏上显示模态底部表单/替换底部导航栏（无障碍）

Question

我正在尝试为我自己的 Flutter 应用程序复制一些类似于 Google 地图的功能。同样基于地图，我希望用户能够选择一个兴趣点并可以选择导航到该位置。

当他们点击“导航”时，我希望底部工作表出现在现有底部导航栏的位置（或顶部），用于基于选项卡的导航。

showModalBottomSheet()这样做，但是它有一个障碍，阻止用户与父视图交互。我需要它，没有障碍。

showBottomSheet()没有障碍物，但它也没有放置在底部导航栏的顶部。

有什么解决方案可以实现此功能吗？我唯一能想到的是将底部导航栏添加到容器中，该容器将根据用户是否正在导航而显示/隐藏，但我觉得这是一个相当被黑客攻击的解决方案，并且希望有更优雅的东西。

我在下面附上了几张图片：

• 第一个屏幕截图显示了 iOS 上 Google 地图的标准视图，该视图具有底部导航栏。
• 第二个屏幕截图显示了“预导航”视图，它是一个底部工作表，放置在底部导航栏的顶部（或代替）。这就是我试图复制的观点。

Answer 1

用于useRootNavigator: true​showBottomModalSheet

Answer 2

我发现的解决方案是将包含Scaffold您的小部件包装bottomNavigationBar到另一个Scaffold. 这个想法是在父级内部显示您的模态Scaffold，以便它位于bottomNavigationBar子级内部的顶部Scaffold。

class _MyWidgetState extends State<MyWidget> {
  bool _showModal = false;
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  PersistentBottomSheetController _bottomSheetController;

  void _showOrHide(bool show) {
    _showModal = show;
    if (_showModal) {
      _bottomSheetController = _scaffoldKey.currentState.showBottomSheet(
        (_) => Container(
          height: MediaQuery.of(context).size.height / 4,
          width: MediaQuery.of(context).size.width,
          child: Text('This is a BottomSheet'),
        ),
        backgroundColor: Colors.white,
      );
    } else {
      if (_bottomSheetController != null) _bottomSheetController.close();
      _bottomSheetController = null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.white,
      body: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Business',
            ),
          ],
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Show/Hide Modal Bottom Sheet'),
            onPressed: () => _showOrHide(!_showModal),
          ),
        ),
      ),
    );
  }
}

ScaffoldState在这个例子中，我通过保留对我父母的引用_scaffoldKey，这样我就可以showBottomSheet在正确的Scaffold.

在 DartPad 上尝试完整代码

截屏：