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>

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

Answer 1

将z-index声明为CSS属性，因此所有元素都应该呈现为受到尊重。例如：

page.css

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

page.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。

Answer 2

我通过使用gridlayout使其工作，然后重复相同的行号。然后，项目的顺序确定z-index playground demo：

<GridLayout rows="*, *, *" columns="*">
    <GridLayout row="0" col="0" height="300" backgroundColor="black" />
    <GridLayout row="1" col="0" height="300" backgroundColor="red" />
    <GridLayout row="2" col="0" height="300" backgroundColor="green" />
    <GridLayout row="0" col="0" height="100" backgroundColor="blue" margin="100" /> <!-- displays on top of the first row 0 -->
</GridLayout>

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

2 个答案: