Flutter 中的变换手势检测器(带堆栈)

2024-01-17

在我的代码中,我使用手势检测器在用户拖动时拉出菜单。但是当我向上拉菜单时,GestureDetector 的碰撞盒不会改变,所以当我想把它放回去时,它只记录在初始碰撞盒上的拖动,而不是新的碰撞盒(我将小部件转换为的位置)

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

这是代码:

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
              ],
            ),
          ),
        ),
      ),
    ),
  )
]),

还发生的情况是,当我向上拉菜单时,我无法单击新菜单命中框中的任何项目,我似乎只是单击菜单到其下面的卡片。


有一个解决方案(解决方法),但不幸的是,这是所需的行为。

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

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

然后他关闭了这个问题。

问题

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

解决方案

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 中的变换手势检测器(带堆栈) 的相关文章

随机推荐