showModalBottomSheet 显示 bottomNavigationBar

抱歉，showModalBottomSheet 与 bottomNavigationBar 是两个不同的概念，无法通过 showModalBottomSheet 显示 bottomNavigationBar。

showModalBottomSheet 是一个用于显示底部弹出式对话框的方法，而 bottomNavigationBar 是一个用于在屏幕底部显示导航栏的小部件。

如果你想在屏幕底部显示导航栏，可以使用 Scaffold widget，其中底部导航栏可以通过 bottomNavigationBar 参数来设置。

相关问题

showModalBottomSheet覆盖bottomNavigationBar

您可以使用`showModalBottomSheet`方法的`isScrollControlled`属性来控制底部模态框是否覆盖`bottomNavigationBar`。将其设置为true将使模态框覆盖`bottomNavigationBar`，而将其设置为false将使模态框与`bottomNavigationBar`并排显示。

以下是一个使用`isScrollControlled`属性的示例：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height - kToolbarHeight,
      child: Column(
        children: <Widget>[
          // 模态框内容
        ],
      ),
    );
  },
);

在此示例中，设置`isScrollControlled`为true，容器的高度减去`kToolbarHeight`，即`AppBar`的高度，这将使底部模态框显示在`bottomNavigationBar`顶部。

showModalBottomSheet 不覆盖bottomNavigationBar

在Flutter中，showModalBottomSheet方法会在当前页面上方显示一个模态底部面板，该方法的调用可能会覆盖当前页面的bottomNavigationBar。要避免这种情况，可以使用以下两种方法：

1. 使用Scaffold的bottomNavigationBar属性来设置页面底部导航栏，而不是在页面中使用BottomNavigationBar组件。这样，即使showModalBottomSheet方法覆盖了页面的底部区域，底部导航栏也不会被覆盖。

2. 在showModalBottomSheet方法中设置isScrollControlled为true，这将导致模态底部面板显示在页面中，而不是在页面上方。这样，即使模态面板覆盖了页面的底部区域，底部导航栏也不会被覆盖。示例代码如下：

void _showModal(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return Container(
        height: MediaQuery.of(context).size.height * 0.8,
        child: Center(
          child: Text('This is a modal bottom sheet'),
        ),
      );
    },
  );
}

这样，在调用_showModal方法时，模态底部面板将显示在页面中，而不会覆盖底部导航栏。