如何在Nativescript中制作叠加屏幕

Question

我正在尝试在nativescript设计叠加屏幕。

我需要一个透明的半透明屏幕，显示用户需要做的事情。是否有可用的默认插件或布局？

Answer 1

<GridLayout>
    <Label text="Play with NativeScript!"></Label>
    <Label class="overlay" text="I'm an overlay" verticalAlignment="center"></Label>
</GridLayout>

默认情况下，GridLayout中的所有内容都放在第一列的第一行中，除非您另行定义。如果在同一列和行中定义两个视图，则最低视图将堆叠在前一个视图的前面。

您当然可以使用内部任何布局并使用colSpan或rowSpan等内容。

<GridLayout columns="*" rows="*">
    <StackLayout col="0" row="0">
        <Label text="Play with NativeScript!"></Label>
    </StackLayout>
    <StackLayout col="0" row="0" class="overlay" >
        <Label text="I'm an overlay"></Label>
    </StackLayout>
</GridLayout>

Answer 2

您可以使用此本机脚本示例模板来使用覆盖屏幕。 https://play.nativescript.org/?template=play-js&id=7wQ8EL&v=5 该模板已经覆盖了半屏，具有完全透明的效果。

Answer 3

    <StackLayout class="content-wrapper">
        <router-outlet></router-outlet>
    </StackLayout>

    <StackLayout class="custom-dialog">
        <Label text="Loading..." textWrap="true"></Label>
    </StackLayout>

</AbsoluteLayout>

Answer 4

您可以使用它来显示覆盖。用加载内容填充内容，并根据需要设置不透明度。如果需要隐藏ActionBar，只需使用ContextBinding和Observables将高度设置为“ 0”即可。

 <AbsoluteLayout width="100%" height="100%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: -10%;">
    <Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"/>

</AbsoluteLayout>
<AbsoluteLayout width="100%" height="10%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: 100%;">

</AbsoluteLayout>