dart - onTapDown 和 GestureDetector() 的其他回调被延迟

Question

我目前正在使用 GestureDetector() 创建一个带有 AnimatedContainer() 的自定义按钮。

目标是在用户按下并释放按钮后获得某种动画，包括比例、颜色、阴影或其他任何内容。

我现在的问题是 onTapDown() 回调被延迟了。可能是因为此按钮实际上是 SliverList 中的一个项目，这导致了延迟。但是，如果我在不滚动的情况下点击 GestureDetector，则需要几百毫秒才能触发 onTapDown 回调。为什么？

我确实理解 Flutter 以及基本上任何其他 UI 框架都需要对列表中的对象进行某种延迟触摸。它必须确定用户想要滚动或按下按钮。

但是您有什么想法可以在用户按下此容器后显示漂亮的缩放动画吗？

这是包含 RecipeMetaItem 的 SliverList(然后对触摸输入使用react)。

SliverList(
   delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          MetaItem metaItem = state.metaItems[index];
          return RecipeMetaItem(metaItem: metaItem, height: 178);
      },
      childCount: state.metaItems.length,
   ),
)

这是 RecipeMetaItem()

的一部分

class RecipeMetaItem extends StatefulWidget {
  final double height;
  final MetaItem metaItem;

  const RecipeMetaItem({Key key, this.metaItem, this.height = 200}) : super(key: key);

  @override
  RecipeMetaItemState createState() {
    return new RecipeMetaItemState();
  }
}

class RecipeMetaItemState extends State<RecipeMetaItem> {
  double offset;


  @override
  void initState() {
    super.initState();
    offset = 0.0;
  }

  @override
  Widget build(BuildContext context) {

    return Padding(
      padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 20.0),
      child: GestureDetector(
        onTapDown: (details) {
          setState(() {
            offset = -10;
          });
        },
        onTapUp: (details) {
          setState(() {
            offset = 0;
          });
        },
        child: AnimatedContainer(
          duration: Duration(milliseconds: 60),
          curve: Curves.easeOut,
          transform: Matrix4.translationValues(0, offset, 0),
          child: Column(
            children: <Widget>[
              Container(
                height: widget.height,
                decoration: new BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withAlpha(40),
                      blurRadius: 12.5,
                      spreadRadius: 0.0,
                    )
                  ],
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  child: Stack(
                    children: [
                      CachedNetworkImage(
                        fit: BoxFit.cover,
                        imageUrl: widget.metaItem.imageUrl,
                        fadeInDuration: Duration(milliseconds: 50),
                        errorWidget: (context, url, error) => new Icon(Icons.error),
                      ),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0, left: 4.0, right: 4.0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: Text(
                        widget.metaItem.title,
                        textAlign: TextAlign.left,
                        style: TextStyle(fontWeight: FontWeight.w700, fontSize: 17.0),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

谢谢!

Answer 1

不确定你是否解决了这个问题，但我在 S.O. 上发现了一个类似的问题。我认为同样的解决方案可能适合您!

尝试将 GestureDetector 切换为 Listener 并替换:

onTapDown: (details) {
  setState(() {
    offset = -10;
  });
},
onTapUp: (details) {
  setState(() {
    offset = 0;
  });
},

与:

onPointerDown: (PointerDownEvent event) {
  setState(() {
    offset = -10;
  });
},
onPointerUp: (PointerUpEvent event) {
  setState(() {
    offset = 0;
  });
},

希望这能解决问题，在这种情况下问题将出在 GestureDetector，而不是子部件。