如何在 Nativescript 中制作覆盖屏幕 [关闭]

Posted 2023-02-19

【中文标题】如何在 Nativescript 中制作覆盖屏幕 [关闭]

【英文标题】：how to make a overlay screen in Nativescript [closed]

【发布时间】：2018-08-31 17:32:58

【问题描述】：

我正在尝试在nativescript 中设计一个覆盖屏幕。

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

【问题讨论】：

嗨。请分享您到目前为止所做的工作。

【参考方案1】：

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

【讨论】：

不错。 ..示例但是..当尝试查看预览时..它崩溃..如果下载de项目..并使npm安装它也崩溃....

【参考方案2】：

<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>

【参考方案3】：

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

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

</AbsoluteLayout>

【讨论】：

使用此链接...docs.nativescript.org/api-reference/classes/…

【参考方案4】：

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

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

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

</AbsoluteLayout>