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

【问题标题】：Why is showModalBottomSheet covers bottomNavigationBar, while showBottomSheet displayed on top of it position-wise?为什么 showModalBottomSheet 覆盖bottomNavigationBar，而showBottomSheet 按位置显示在其顶部？
【发布时间】：2021-10-01 05:19:11
【问题描述】：

我有一个如下所示的应用程序（简化版）：
工作飞镖示例： 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：

现在它只涵盖了包括底部导航栏在内的所有内容：

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

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

【问题讨论】：

标签： flutter flutter-showmodalbottomsheet bottomappbar

【解决方案1】：

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

【讨论】：