flutter 底部模态框 不遮挡导航栏

如果您使用的是Flutter自带的BottomSheet，那么它会默认覆盖整个屏幕，包括导航栏。不过，您可以通过自定义BottomSheet来解决这个问题。

首先，您需要创建一个继承自StatefulWidget的类，用来显示底部模态框。在这个类中，您需要定义一个变量来保存底部模态框的高度：

class CustomBottomSheet extends StatefulWidget {
  @override
  _CustomBottomSheetState createState() => _CustomBottomSheetState();
}

class _CustomBottomSheetState extends State<CustomBottomSheet> {
  double _height = 0.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _height,
      child: Column(
        children: [
          // 在这里添加您的底部模态框内容
        ],
      ),
    );
  }
}

然后，在显示底部模态框的代码中，您需要使用showModalBottomSheet函数，并将isScrollControlled参数设置为true，以便底部模态框可以滚动。接着，您需要将返回的widget包装在一个Builder widget中，这样就可以获取到Scaffold的上下文，从而得到导航栏的高度。最后，您需要在showModalBottomSheet的builder函数中，将CustomBottomSheet作为返回值。

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return Builder(
        builder: (scaffoldContext) {
          final double statusBarHeight = MediaQuery.of(scaffoldContext).padding.top;
          final double appBarHeight = kToolbarHeight;
          final double screenHeight = MediaQuery.of(scaffoldContext).size.height;

          return StatefulBuilder(
            builder: (context, setState) {
              return CustomBottomSheet();
            },
          );
        },
      );
    },
  );
}

在CustomBottomSheet中，您需要监听底部模态框的高度变化，并将其保存在_height变量中。这可以通过在底部模态框中添加一个LayoutBuilder widget来实现。在LayoutBuilder的回调函数中，您可以获取到底部模态框的高度，并将其保存在_height变量中。

class CustomBottomSheet extends StatefulWidget {
  @override
  _CustomBottomSheetState createState() => _CustomBottomSheetState();
}

class _CustomBottomSheetState extends State<CustomBottomSheet> {
  double _height = 0.0;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (_height != constraints.maxHeight) {
          setState(() {
            _height = constraints.maxHeight;
          });
        }

        return Container(
          height: _height,
          child: Column(
            children: [
              // 在这里添加您的底部模态框内容
            ],
          ),
        );
      },
    );
  }
}

这样，您就可以创建一个不会遮挡导航栏的底部模态框了。