如何在 Flutter 中捕获小部件上的第一个手势

Question

我正在使用 Flutter 使用这两个包开发移动应用程序：sliding_up_panel 和 mapbox_gl。我希望当用户在地图上执行任何类型的手势时，向上滑动的面板会关闭并为用户提供更多使用地图的空间。

使用下面的代码几乎完成了，但我遇到了视差效果的麻烦。

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:mapbox_gl/mapbox_gl.dart';

void main() {
  runApp(const HomePage());
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PanelController _panelController = PanelController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      home: Scaffold(
        body: SlidingUpPanel(
          controller: _panelController,
          defaultPanelState: PanelState.OPEN,
          parallaxEnabled: true,
          parallaxOffset: .5,
          panel: const Placeholder(),
          body: MapboxMap(
            accessToken: const String.fromEnvironment("ACCESS_TOKEN"),
            initialCameraPosition: const CameraPosition(
              target: LatLng(40.4165, -3.70256),
              zoom: 15,
            ),
            onMapCreated: (controller) {
              controller.addListener(() {
                if(_panelController.isPanelOpen && controller.isCameraMoving) {
                  _panelController.close();
                }
              });
            },
          ),
        ),
      ),
    );
  }
}

因此，当用户开始平移地图时，向上滑动的面板会关闭，如果用户快速释放它，则一切正常，就像下一个 GIF 所示：

但是，如果用户按住手指，地图就会像下面的 GIF 中那样晃动：

此外，当前代码无法检测用户触摸，它仅在滚动地图时起作用。

我认为最好的解决方案是捕获地图上的第一个手势，使用一些包装器暂时禁用它的交互性，直到全屏显示，但我不知道该怎么做。我尝试用内置小部件

IgnorePointer()

包装它，但它会禁用所有输入，并且无法知道用户何时点击地图以触发动画并稍后解锁地图。

将欣赏实现这个想法的方法或任何其他可行的解决方案。

提前致谢！

Answer 1

Mapbox 使用 HtmlElementView 吗？检查这个https://github.com/flutter/flutter/issues/72273。