Flutter - 点击InkWell在Stack内无法工作

Question

我刚开始学习Flutter，使用 onTap() 时遇到了问题。

我使用AdobeXd制作模板，但似乎无法放置GestureDetector和InkWell Widgets。

Transform.translate(
        offset: Offset(MediaQuery.of(context).size.width / 30, 132.0),
        child:
        Stack(
          children: <Widget>[
            Transform.translate(
              offset: Offset(MediaQuery.of(context).size.width / 1.7, 1.0),
              child:
              InkWell(
                onTap: (){
                  setState(() {
                    actu = true;
                  });
                  print('ink');

                },
                child: Stack(
                  children: <Widget>[
                    Container(
                      width: MediaQuery.of(context).size.width / 2.85,
                      height: 36.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(19.0),
                        color: const Color(0x35ffffff),
                      ),
                    ),
                    Transform.translate(
                      offset: Offset(MediaQuery.of(context).size.width / 3.7, 6.0),
                      child:
                      // Adobe XD layer: 'Icones/actualiser' (component)
                      XDIconesactualiser(),
                    ),
                    Transform.translate(
                      offset: Offset(MediaQuery.of(context).size.width / 21.47, MediaQuery.of(context).size.height / 110),
                      child:
                      SizedBox(
                        width: 75.0,
                        height: 27.0,
                        child: Text(
                          'Actualiser',
                          style: TextStyle(
                            fontFamily: 'OpenSans-SemiBold',
                            fontSize: 14,
                            color: const Color(0xffffffff),
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),

onTap 不起作用。似乎只有在 Stack 或 Transform 内部时才会这样。 你能帮我吗？

编辑：

事件没有被触发。好像什么也没发生一样。当我在开发工具中查看树形结构时，墨水喷泉出现了，但是当我点击手机时什么也没发生。

Flutter 树形结构的图片

编辑 2：

我想要一个像这样的结构

但是当我去除点击偏移量以使其工作时，我得到了这个

- bchoisy

---

“它不起作用”是什么意思？你期望发生什么，实际上又发生了什么？ - Claudio Redi

事件没有被触发。好像它不存在一样，什么也没有发生。当我在开发工具中查看树形结构时，墨水瓶出现了，但是当我点击手机时，什么也没有发生。 - bchoisy

你的意思是说你在点击时没有得到墨水动画效果吗？ - sixtysticks

一开始我使用了一个onPressed手势检测器来触发一个函数，但它没有起作用，所以我决定使用一个InkWell。 - bchoisy

所以墨水池动画正在工作，只是在“onTap”事件中调用的函数？我复制了您的代码，它对我来说可以正常工作。如果您看不到墨水池动画，我知道该怎么修复。 - sixtysticks

Answer 1

我也遇到了同样的问题，解决方法是改变 堆栈中项目的顺序。

Ink Well小部件被下一个Stack元素覆盖。

将您的Ink Well小部件移动到Stack子项的最后。

- XiaoHui

Answer 2

我遇到了同样的问题。将Inkwell的子部件包装在IgnorePointer中解决了这个问题。

在这里解决：Flutter - InkWell not reacting to onTap inside Flexible

- DonAlex1897

Answer 3

如果您需要墨水瓶动画，请从Container小部件中删除BoxDecoration（或者如果仅用于装饰，则完全删除），并将内部的Stack包装在一个颜色设置为原始框装饰颜色的Ink小部件中。这对我很有效。

child: Stack(
  children: <Widget>[
    Transform.translate(
      offset: Offset(MediaQuery.of(context).size.width / 1.7, 1.0),
      child: InkWell(
        onTap: () {
          setState(() {
            actu = true;
          });
          print('ink');
        },
        child: Ink(
          color: const Color(0x35ffffff),
            child: Stack(
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width / 2.85,
                  height: 36.0,
                ),
        ...

- sixtysticks

---

我理解问题，但不知道如何解决。问题来自于偏移量，它移动了可视元素但没有移动我们点击的框，因此它被隐藏在另一个元素后面。如果删除偏移量，它可以正常工作。那么如何移动onTap框呢？ - bchoisy

我对你尝试创建的小部件结构有点困惑。为什么你想要移动视觉元素？你是说你想要两个点击区域相距一定距离吗？提供UI截图可能会对我们有所帮助。 - sixtysticks

“我该如何移动onTap框？” - 可能需要将您想要点击的部分包裹在 Inkwell 中？ - sixtysticks

Answer 4

我和你一样遇到了同样的问题！ 将Stack放入一个容器中，并给它一个特定的宽度。

Stack必须具有一定的大小，以使小部件不会从中突出。

- VolcanoCoder