为什么 showModalBottomSheet 覆盖 bottomNavigationBar，而 showBottomSheet 按位置显示在其顶部？

问题描述

我有一个看起来像这样的应用程序（简化版）：
工作飞镖示例： https://dartpad.dev/cc4e524315e104c272cd06aa7037aa10

import 'package:Flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),),bottomNavigationBar: BottomWidget(),);
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello,World!');
  }
}

class BottomWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return BottomAppBar(
      child: InkWell (
        child: Container(
          height:100,color: Colors.pink,child: Center(
            child: Text('this is a bottom navigation bar')
          ),onTap: () {
          showModalBottomSheet(
            context: context,builder: (context) => Container(),);
        }
      ),);
  }
}

我的问题是，我想使用 showModalBottomSheet 来阻止用户与屏幕交互，但我需要 bottomNavigationBar 显示如下：

现在它只涵盖了包括bottomNavigationBar在内的所有内容：

如果我将其更改为 showBottomSheet，它的效果就像第一张图片一样。

为什么他们的行为不同？
如何使用 showModalBottomSheet 达到我想要的结果？

解决方法

showModalBottomSheet 在所有小部件和图层的顶部显示底部工作表，如果您想在 bottomNavigationBar 下显示它，您应该在父级中使用 Stack 并在其中使用单个子级。采样不容易，复制伪代码需要很长时间

bottomappbar flutter-showmodalbottomsheet