flutter Bottomsheet 覆盖底部导航

Question

我正在用谷歌地图做一个项目。当我点击谷歌地图上的圆圈时，必须显示底部表格。但是当我使用 showModalBottomSheet 执行此操作时，它会覆盖底部导航栏。我不想要它。使用 showbottomsheet，当我点击其他内容时，我不知道如何关闭它。我该如何解决？

import 'package:eqms_test/widget/setting/setting.dart';
import 'package:flutter/material.dart';
import 'package:eqms_test/widget/eq_info/eq_info.dart';
import 'package:eqms_test/widget/eq_safety/eq_safety.dart';
import 'package:eqms_test/widget/sensor_info/sensor_info.dart';
import 'package:eqms_test/widget/sensor_map/sensor_map.dart';

class RootScreen extends StatefulWidget {
  const RootScreen({super.key});

  @override
  State<RootScreen> createState() => _RootScreenState();
}

class _RootScreenState extends State<RootScreen> with TickerProviderStateMixin{
  final PageController _controller = PageController();
  int selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    print('RootScreen initState');
  }

  final List<Widget> widgetOptions = <Widget>[
    EQ_Info(),
    EQ_Safety(),
    Sensor_Map(),
    Sensor_Info(),
    Setting()
  ];

  void onItemTapped(int index){
    if (selectedIndex != index) {
      _controller.jumpToPage(index);
      setState(() {
        selectedIndex = index;
      });
    }
  }

  BottomNavigationBar renderBottomNavigationBar(){
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'EQ_Info',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'EQ_Safety',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Sensor_Map',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Sensor_Info',
        ),BottomNavigationBarItem(
          icon: Icon(Icons.local_activity),
          label: 'Setting',
        ),
      ],
      type: BottomNavigationBarType.fixed,
      currentIndex: selectedIndex,
      unselectedItemColor: Colors.grey,
      selectedItemColor: Colors.deepOrange,
      onTap: onItemTapped,
    );
  }

  @override
  Widget build(BuildContext context) {
    print('RootScreen build');

    return Scaffold(
      body: PageView(
        controller: _controller,
        onPageChanged: onItemTapped,
        children: widgetOptions,
      ),
      bottomNavigationBar: renderBottomNavigationBar(),
      extendBody: false,
      extendBodyBehindAppBar: true,
    );
  }
}

这是RootScreen.dart

import 'package:eqms_test/Widget/google_map/models/GoogleMapMode.dart';
import 'package:eqms_test/Widget/google_map/google_map.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';


class EQ_Info extends StatefulWidget {
  const EQ_Info({super.key});

  @override
  State<EQ_Info> createState() => _EQ_InfoState();
}

class _EQ_InfoState extends State<EQ_Info> with AutomaticKeepAliveClientMixin {
  GoogleMapMode mode = GoogleMapMode.shelter;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    getServerData();
    print('EQ_Info initState');
  }

  @override
  void dispose() {
    client.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
      floatingActionButton: Padding(
        padding: EdgeInsets.only(left: 10, right: 20), // 임시 줄 맞추기
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ActionChip(
              label: Text('eq info'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.EQinfo) mode = GoogleMapMode.EQinfo;});
                }),
            ActionChip(
              label: Text('shelter'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.shelter) mode = GoogleMapMode.shelter;});
                }),
               ActionChip(
              label: Text('empty'),
              onPressed: () {
                setState(() {
                  if (mode != GoogleMapMode.empty) mode = GoogleMapMode.empty;
                });
              },
            ),
          ],
        ),
      ),
      body: Google_Map(mode: mode,),
    );
  }

}

eq_info.dart

circles.add(
                Circle(
                  circleId: CircleId(value[i].id.toString()),
                  center: LatLng(value[i].latitude, value[i].longitude),
                  fillColor: Colors.blue.withOpacity(0.5),
                  radius: value[i].magnitude * 10000,
                  strokeColor: Colors.blueAccent,
                  strokeWidth: 1,
                  onTap: () {
                    BottomSheets.showCircleBottomSheet(context, value[i].id.toString());
                  },
                  consumeTapEvents: true,
                )

google_map.dart 的一部分

import 'package:flutter/material.dart';

class BottomSheets {
  static void showCircleBottomSheet(BuildContext context, String data){
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Container(
              height: 150,
              color: Colors.white,
              child: Center(child: Text(data)),
            ),
          );
        },
      backgroundColor: Colors.transparent,
      barrierColor: Colors.transparent,
      isScrollControlled: true,
      useRootNavigator: true,
      // useSafeArea: true,
    );
  }
}

和制作底片的底片。

我不在乎模态或非模态，我只是想要一个底部工作表，当我点击其他东西时关闭，而不是覆盖底部导航栏

如您所见，我尝试了 useRootNavgiator，但它不起作用。我不知道为什么会这样