忽略 svg 图像抖动的透明部分的 onTap 动作答案

【问题标题】：Ignore onTap action on Transparent part of the svg image flutter忽略 svg 图像抖动的透明部分的 onTap 动作
【发布时间】：2022-09-24 12:08:54
【问题描述】：

问题是它们是堆栈中的多个 svg 图像。我需要它们仅在用户点击 svg 的填充部分时触发。因此，当它忽略图像的透明部分时，它可以在 svg 图像后面触发。

        Stack(
          children: [
            GestureDetector(
              onTap: () => updateSelectedPart(1),
              child: SvgPicture.asset(
                \'assets/images/1.svg\',
                color: selectedPart == 1
                    ? Colors.red
                    : Colors.blue,
              ),
            ),
            GestureDetector(
              onTap: () => updateSelectedPart(2),
              behavior: HitTestBehavior.translucent,
              child: SvgPicture.asset(
                \'assets/images/2.svg\',
                color: selectedPart == 2
                    ? Colors.red
                    : Colors.blue,
              ),
            ),
            GestureDetector(
              onTap: () => updateSelectedPart(3),
              behavior: HitTestBehavior.deferToChild,
              child: AbsorbPointer(
                absorbing: true,
                child: SvgPicture.asset(
                  \'assets/images/3.svg\',
                  excludeFromSemantics: true,
                  clipBehavior: Clip.none,
                  color: selectedPart == 3
                      ? Colors.red
                    : Colors.blue,
                ),
              ),
            ),
          ],
        )

堆栈点击事件将被优先考虑自下而上，这取决于您用于点击事件的内容，如果您可以提供示例 sn-p 来重现您的问题，那将很容易。
您可以在 CSS 中使用 pointer-events:fill 或作为属性。请阅读pointer-events
添加了 sn-p 请检查
你能再看看@YeasinSheikh
我不确定如何使用 svg 处理特定部分，但可以使用 Clipped 小部件在点击区域设置边界，这里点击优先级 images/3 > images/2...与behavior

标签： flutter svg gesturedetector ontap

【解决方案1】：

排序是自下而上的，因此您需要调整（更改堆栈中的顺序），以便可能覆盖另一个 SVG 透明部分的内容在动作（单击/触摸事件）而不是其下方的 SVG（在本例中为上方）触发从下到上）

【讨论】：