进行浮动布局后，iOS按钮变得无法单击

Question

我正在创建一个自定义操作栏，我的想法是该操作栏必须是透明的（这就是为什么我不能/不希望使用本机栏），并且在操作栏后面必须有内容（一个图片在这种情况下。）

我尝试了多种方法，所有这些方法都具有相同的结果，iOS按钮无缘无故变得不可点击。

好吧，所以我内部有一个AbsoluteLayout，上面有GridLayout作为自定义操作栏，然后是一个ScrollView，宽度和高度为100％，在滚动视图中有一些内容。问题是，只要我在GridLayout内放一个按钮，该按钮就只能在iOS上不可点击，因为在Android上可以正常工作。

让我用一些代码向您展示我的示例：

<Page actionBarHidden="true">
        <AbsoluteLayout>
            <GridLayout rows="50, *" backgroundColor="red" top="0" left="0" height="50" id="bar">
                <Button text="click" @tap="goToDetailPage" id="buttondelsous"></Button>
            </GridLayout>
            <ScrollView backgroundColor="blue" width="100%" height="100%" top="0" id="content">
                <WrapLayout>
                    <StackLayout>
                        <Label text="this is behind"></Label>
                    </StackLayout>
                </WrapLayout>
            </ScrollView>
        </AbsoluteLayout>
    </Page>

关于强制自定义操作栏位于滚动视图前面的样式，我有：

#bar {
        z-index: 5;
        width: 100%;
    }

    #content {
        z-index: 2;
    }

在Android上看起来像这样：

在iOS上采用相同的方式，但是“点击”按钮无法正常工作，就像它在某物后面一样。

关于如何解决此问题或任何其他方法来获得我所需要的任何想法？请记住，在操作之后，我必须能够放置内容（例如，我不想放置在Page标签本身中但可以放置在其他布局中的背景图像）

谢谢！

Answer 1

一个聪明人曾经告诉我，Nativescript按您列出的顺序堆叠元素。尝试翻转顺序，以便该按钮在模板的最后列出。我相信，如果您翻转订单，甚至不需要z-index线。

应该像

<Page actionBarHidden="true">
  <AbsoluteLayout>
    <ScrollView backgroundColor="blue" width="100%" height="100%" top="0" id="content">
      <WrapLayout>
        <StackLayout>
          <Label text="this is behind"></Label>
        </StackLayout>
      </WrapLayout>
    </ScrollView>
    <!-- I'm listed second so I will be on top even though I have row="0" -->
    <GridLayout rows="50, *" backgroundColor="red" top="0" left="0" height="50" id="bar">
      <Button text="click" @tap="goToDetailPage" id="buttondelsous"/>
    </GridLayout>
  </AbsoluteLayout>
</Page>