Flutter Google 地图手势在模态底部工作表中不起作用

Question

我正在 Flutter 应用程序中实现底部工作表，以使用 Google 地图选择位置。虽然地图显示正确，但与底部工作表内的地图交互时，捏合缩放和滚动（平移）等手势不起作用。

我怀疑这可能与手势识别器或底部工作表和地图小部件之间的交互有关。

这是我的 showLocationSelection 方法：

void showLocationSelection(
  BuildContext context,
  ThemeData theme,
  CommonColorsExt? commonColors,
  MerchantQuestionsViewModel viewModel,
) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(16.0),
      ),
    ),
    isScrollControlled: true,
    builder: (BuildContext context) {
      return GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus(); // Dismiss keyboard
        },
        child: Container(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.9,
          ),
          child: Column(
            children: [
              Expanded(
                child: GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(6.91177, 79.85043),
                    zoom: 15.0,
                  ),
                  onTap: (LatLng position) {
                    viewModel.setGeoLocation(position);
                  },
                  markers: viewModel.markers,
                  mapType: MapType.normal,
                  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
                    Factory<ScaleGestureRecognizer>(
                      () => ScaleGestureRecognizer(),
                    ),
                  },
                  zoomGesturesEnabled: true,
                  scrollGesturesEnabled: true,
                  myLocationButtonEnabled: false,
                  myLocationEnabled: false,
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

我已经在 Flutter 的模态底部表单中实现了 Google 地图，并且我希望允许捏合缩放、滚动和其他地图手势在底部表单中正常运行。我已在 GoogleMap 小部件中启用了 ZoomGesturesEnabled 和scrollGesturesEnabled 属性，但是当地图显示在底部工作表内时，捏合缩放和滚动手势似乎不起作用。

我希望当我使用 Google 地图打开底部工作表时，我应该能够像在普通视图中一样放大/缩小和滚动地图。然而，这些手势没有按预期响应。

我还尝试调整gestureRecognizers和其他相关设置，但没有实现所需的功能。

Answer 1

您的假设是正确的，底部工作表正在捕获手势，并且不允许地图接管它们。

您是否尝试使用 GestureDetector 来解决该问题？像这样的东西：

void showLocationSelection(
  BuildContext context,
  ThemeData theme,
  CommonColorsExt? commonColors,
  MerchantQuestionsViewModel viewModel,
) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        top: Radius.circular(16.0),
      ),
    ),
    isScrollControlled: true,
    builder: (BuildContext context) {
      return GestureDetector(
        onTap: () {
          FocusScope.of(context).unfocus(); // Dismiss keyboard
        },
        child: Container(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height * 0.9,
          ),
          child: Column(
            children: [
              Expanded(
                child: GestureDetector(
                  onVerticalDragUpdate: (_) {}, // Prevents bottom sheet gestures
                  child: GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: LatLng(6.91177, 79.85043),
                      zoom: 15.0,
                    ),
                    onTap: (LatLng position) {
                      viewModel.setGeoLocation(position);
                    },
                    markers: viewModel.markers,
                    mapType: MapType.normal,
                    gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
                      Factory<ScaleGestureRecognizer>(
                        () => ScaleGestureRecognizer(),
                      ),
                      Factory<PanGestureRecognizer>(
                        () => PanGestureRecognizer(),
                      ),
                      Factory<TapGestureRecognizer>(
                        () => TapGestureRecognizer(),
                      ),
                    },
                    zoomGesturesEnabled: true,
                    scrollGesturesEnabled: true,
                    myLocationButtonEnabled: false,
                    myLocationEnabled: false,
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}