2

我正在尝试在nativescript.

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

4

4 回答 4

3 
<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>
于 2018-03-22T16:09:14.663 回答
3

您可以使用此 nativescript 示例模板来使用覆盖屏幕。https://play.nativescript.org/?template=play-js&id=7wQ8EL&v=5 这个模板已经有一个全透明的半屏覆盖。

在此处输入图像描述

于 2019-08-06T11:59:07.850 回答
0 

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

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

</AbsoluteLayout>
于 2018-03-22T10:19:32.410 回答
0

您可以使用它来显示叠加层。使用您的加载填充内容并根据需要设置不透明度。如果您需要隐藏 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>
于 2019-08-05T05:57:46.897 回答