XML 中设置的 NativeScript zIndex 不起作用？

Question

考虑下一个 xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
  <!-- UI Decalration -->
    <AbsoluteLayout>
      <GridLayout zIndex="99" height="100" width="100" backgroundColor="red"></GridLayout>
      <GridLayout zIndex="1" height="200" width="200" backgroundColor="green"></GridLayout>
    </AbsoluteLayout>
</Page>

根据我的理解，红色方 block 应该是可见的，但它隐藏在绿色方 block 后面。我做错了什么吗？

Answer 1

将 z-index 声明为 CSS 属性，以便所有元素都应按预期渲染。例如:

页面.css

.lower-grid {
    z-index: 1;
}
.upper-grid {
    z-index: 99;
}

页面.xml

  <AbsoluteLayout>
      <GridLayout class="upper-grid" height="100" width="100" backgroundColor="red" />
      <GridLayout class="lower-grid" height="200" width="200" backgroundColor="green" />
  </AbsoluteLayout>

这个解决方案对我来说很有效 - 请记住 Android API 21 及更高版本支持 z-index。