模态框不遮盖 底部导航栏

如果你想让模态框不遮盖底部导航栏，可以使用 `SafeArea` 组件来包裹内容。`SafeArea` 可以确保其子组件不会被设备的状态栏、底部导航栏和刘海屏等覆盖。

以下是一个示例代码：

showModalBottomSheet(
  context: context,
  builder: (context) => SafeArea(
    child: Container(
      // 模态框的内容
    ),
  ),
);

在这个示例中，模态框的内容被包裹在 `SafeArea` 组件中，这样就可以确保模态框不会覆盖底部导航栏了。

相关问题

模态框不遮盖 底部导航栏并且可操作导航栏

如果你想让模态框不遮盖底部导航栏并且在打开模态框时仍然可以操作导航栏，可以使用 `Stack` 组件来实现。

以下是一个示例代码：

class MyBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: GestureDetector(
            onTap: () {
              // 点击空白处关闭模态框
              Navigator.of(context).pop();
            },
            child: Container(
              color: Colors.black.withOpacity(0.5),
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
            ),
            height: 300,
            width: MediaQuery.of(context).size.width,
            child: Column(
              children: [
                // 模态框的内容
              ],
            ),
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们使用 `Stack` 组件来实现模态框和遮罩层的叠加。遮罩层使用 `Positioned.fill` 来撑满整个屏幕，并设置了一个点击事件，用于点击空白处关闭模态框。模态框使用 `Align` 来定位到屏幕底部，并设置了一个圆角边框。这样就可以在打开模态框时仍然可以操作底部导航栏，并且不会被模态框遮盖。

如何设置底部导航栏 不让模态框遮盖？

要实现底部导航栏不被模态框遮盖，可以在打开模态框之前将底部导航栏的 z-index 属性值设置为更高的值，这样就可以让底部导航栏处于模态框上面了。代码示例：

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 9999; /* 设置一个比模态框更高的 z-index 值 */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999; /* 设置一个较低的 z-index 值 */
}

在打开模态框的时候，先将底部导航栏的 z-index 值设置为 9999，关闭模态框后再将其设置回原来的值即可。