Flutter 中的变换手势检测器（带堆栈）

Question

在我的代码中，我使用手势检测器在用户拖动时拉出我的菜单。但是当我拉起菜单时，GestureDetector 的hitbox 不会改变，所以当我想把它放回原处时，它只会在初始的hitbox 上注册拖动，而不是新的（我将小部件转换为）

我希望你能理解这一点^^

这是代码：

Stack(children: [
  Column(
    children: <Widget>[
      Expanded(
          child: TabBarView(children: <Widget>[
        CostumCard(
          imgUrl: url,
        ),
        CostumCard(
          imgUrl: url,
        ),
      ]))
    ],
  ),
  IgnorePointer(
    child: Opacity(
      opacity: opacity,
      child: Container(color: Colors.black),
    ),
  ),
  Transform(
    transformHitTests: true,
    transform: Matrix4.translationValues(
        0.0, MediaQuery.of(context).size.height - 80 - 70, 0.0),
    child: Transform(
      transformHitTests: true,
      transform: Matrix4.translationValues(0.0, yTransform, 0.0),
      child: GestureDetector(
        onVerticalDragStart: (DragStartDetails details) {
          dragStartY = details.globalPosition.dy;
          dragUpdateY = dragStartY;
        },
        onVerticalDragUpdate: (DragUpdateDetails details) {
          dragDifference =
              dragUpdateY - details.globalPosition.dy;
          yTransform -= dragDifference;
          yTransform = yTransform.clamp(-400.0, 0.0);
          setState(() {
            if (yTransform <= -400)
              yTransform = -400.0;
            else if (yTransform >= 0)
              yTransform = 0.0;
            else
              yTransform = yTransform;
            opacity = yTransform / -400 * 0.8;
            rotation = yTransform / -400 * PI;
          });
          dragUpdateY = details.globalPosition.dy;
        },
        onVerticalDragEnd: (DragEndDetails details) {
          if (dragStartY - dragUpdateY >= 100) {
            setState(() {
              yTransform = -400.0;
              opacity = yTransform / -400 * 0.8;
              rotation = yTransform / -400 * PI;
            });
          } else if (dragStartY - dragUpdateY <= 100 &&
              dragStartY - dragUpdateY >= 0) {
            setState(() {
              yTransform = 0.0;
              opacity = yTransform / -400 * 0.8;
              rotation = yTransform / -400 * PI;
            });
          } else if (dragStartY - dragUpdateY <= -50) {
            setState(() {
              yTransform = 0.0;
              opacity = yTransform / -400 * 0.8;
              rotation = yTransform / -400 * PI;
            });
          }
        },
        child: Container(
          width: double.infinity,
          height: 500.0,
          child: Material(
            elevation: 20.0,
            color: Colors.grey[900],
            child: Column(
              children: <Widget>[
                //menu is here
              ],
            ),
          ),
        ),
      ),
    ),
  )
]),

还有一种情况是，当我拉起菜单时，我无法点击新菜单命中框中的任何项目，我似乎只是点击菜单到它下面的卡片上。

Answer 1

有一个解决方案（解决方法），但不幸的是，这是期望的行为。

我引用了一位 Flutter 维护者的话 ： https://github.com/flutter/flutter/issues/6606：

我们认为这一切正常。请参阅：#6663

然后他关闭了这个问题。

问题

基本上，手势检测器在变换之前不会检测到原始位置之外的任何触摸

解决方案

解决方法是使原始小部件足够大以覆盖转换。我们可以为此添加额外的填充。例如，如果变换小部件将小部件向下移动 100 像素，只需向原始小部件添加 100 像素的底部填充即可。

这将欺骗手势检测器来检测小部件内的任何触摸和额外的填充。因此，当变换移动小部件时，它将接收触摸事件。