NativeScript 使用 z-index 点击元素

Question

我正在尝试为要点击的区域创建图像映射。现在只是一个演示，我没有时间构建所有的原生部分。

现在我将 StackLayout 叠加在 Image 之上。 StackLayout tap. I tried a suggestion to put into aGridLayout` 但点击事件仍然不起作用。浅灰色背景出现在我想要的区域上。

<GridLayout rows="*"
            columns="*">
  <StackLayout row="0"
                col="0"
                width="262"
                height="36"
                marginLeft="30"
                marginTop="147"
                backgroundColor="lightgray"
                style="z-index: 2"
                (tap)="onTap()">
  </StackLayout>
  <Image row="0"
            col="0"
            src="~/images/map.svg"
            width="100%"
            height="255"
            style="z-index: 1"></Image>
</GridLayout>

Answer 1

改变元素的位置修复它。

<GridLayout rows="*"
            columns="*">
  <Image row="0"
            col="0"
            src="~/images/map.svg"
            width="100%"
            height="255"
            style="z-index: 1"></Image>
  <StackLayout row="0"
                col="0"
                width="262"
                height="36"
                marginLeft="30"
                marginTop="147"
                backgroundColor="lightgray"
                style="z-index: 2"
                (tap)="onTap()">
  </StackLayout>
</GridLayout>