Question

我正在尝试为要点击的区域在图像上创建映射。目前仅用于演示，我没有时间构建所有本机部分。

现在，我将StackLayout覆盖在Image上。 StackLayout tap. I tried a suggestion to put into a GridLayout`，但是tap事件仍然不起作用。浅灰色背景出现在我想要的区域上。

<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>

NativeScript点击带有z-index的元素

1 个答案: