iOS 按钮在制作浮动布局后变得无法点击

Question

我正在创建一个自定义操作栏，我的想法是操作栏必须是透明的（这就是我不能t/don不想使用原生操作栏的原因）并且在操作栏后面必须有满足（在这种情况下是图像）。

我尝试了多种方法，所有方法都得到了相同的结果，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 上的方法相同，但按钮 "Click" 不起作用，就像它在某些东西后面一样..

关于如何解决这个问题或任何其他方法来获得我需要的东西有什么想法吗？请记住，在操作后面我必须能够放置内容（比如我不想放置在 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>

iOS 按钮在制作浮动布局后变得无法点击

iOS buttons become unclickable after making a floating layout

nativescript

nativescript-vue