Flutter - Ontap InkWell 在 Stack 中不起作用答案

【问题标题】：Flutter - Ontap InkWell doesn't work inside StackFlutter - Ontap InkWell 在 Stack 中不起作用
【发布时间】：2021-07-04 23:41:04
【问题描述】：

我从flutter开始，使用onTap()有问题。

我使用 adobeXd 制作模板，但似乎无法放置 GestureDetector 和 InkWell 小部件。

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 不起作用。似乎这是在堆栈或变换中的时候。你能帮帮我吗？

编辑：

事件未触发。没有任何事情发生，就好像它不存在一样。当我在开发工具中查看树时，会出现墨水池，但是当我点击手机时没有任何反应

The image of my Flutter tree

编辑 2：

我想要这样的结构

但是当我停用点击工作的偏移量时。我明白了

【问题讨论】：

“它不起作用？”是什么意思。您预计会发生什么以及实际会发生什么？
事件未触发。没有任何事情发生，就好像它不存在一样。当我在开发工具中查看树时，会出现墨水池，但是当我点击手机时，什么也没有发生
你的意思是你没有得到点击时的墨水动画效果？
一开始我使用了onPressed gestureDetector来触发一个功能，但它不起作用所以我决定使用InkWell
所以墨水池动画正在运行，它只是在onTap 事件中调用的函数？我已经复制了你的代码，它对我来说没问题。如果是你看不到的墨水池动画，我知道如何解决。

标签： flutter

【解决方案1】：

如果是您需要的墨水池动画，请从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,
                ),
        ...

【讨论】：

我理解这个问题，但我不知道如何解决它。问题来自偏移。它会移动视觉元素，但不会移动我们单击的框，因此它隐藏在另一个元素后面。如果我删除它的工作原理。如何移动 onTap 框？
我对您尝试做的小部件结构有点困惑。为什么要移动视觉元素？你是说你想要两个彼此分开的水龙头区域吗？您的 UI 屏幕截图可能对我们有用。
"如何移动 onTap 框？" - 可能，将您想要点击的部分包裹在Inkwell？

【解决方案2】：

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

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

【讨论】：