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

时间:2018-05-26 09:25:04

标签: dart flutter

在我的代码中,我使用手势检测器在用户拖动时拉出我的菜单。但是当我拉出菜单时,GestureDetector的命中框不会改变,所以当我想把它放回去的时候,它只会注册拖动初始的hitbox,而不是新的(我将小部件转换为)

我希望你能理解这个^^

以下是代码:

new Stack(children: [
        new Column(
          children: <Widget>[
            new Expanded(
                child: new TabBarView(children: <Widget>[
              new CostumCard(
                imgUrl:
                    url,
              ),
              new CostumCard(
                imgUrl:
                    url,
              ),
            ]))
          ],
        ),
        new IgnorePointer(
          child: new Opacity(
            opacity: opacity,
            child: new Container(color: Colors.black),
          ),
        ),
        new Transform(
            transformHitTests: true,
            transform: new Matrix4.translationValues(
                0.0, MediaQuery.of(context).size.height - 80 - 70, 0.0),
            child: new Transform(
                transformHitTests: true,
                transform:
                    new Matrix4.translationValues(0.0, yTransform, 0.0),
                child: new 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: new Container(
                      width: double.infinity,
                      height: 500.0,
                      child: new Material(
                        elevation: 20.0,
                        color: Colors.grey[900],
                        child: new Column(
                          children: <Widget>[
                            //menu is here
                          ],
                        ),
                      ),
                    ))))
      ]),

当我拉出菜单时,我无法点击新菜单点击框中的任何项目,我只是点击菜单下面的卡片。

1 个答案:

答案 0 :(得分:0)

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

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

我们已经确定这是应有的工作。请参阅:#6663

然后他解决了这个问题。

问题

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

解决方案

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

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