制作浮动布局后，iOS 按钮无法点击

Question

我正在创建一个自定义操作栏，我的想法是操作栏必须是透明的（这就是我不能/不想使用原生操作栏的原因）并且操作栏后面必须有内容（一个本例中的图像）。

我尝试了多种方法，结果都一样，iOS按钮无缘无故变得无法点击。

好的，所以我在里面有一个AbsoluteLayout 我有一个GridLayout 固定在顶部作为自定义操作栏，然后是一个具有100% 宽度和高度的ScrollView，在滚动视图中有一些内容。问题是，只要我在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>