如何在 nativescript 中制作点击阻止覆盖？答案

【问题标题】：How to make a tap-blocking overlay in nativescript?如何在 nativescript 中制作点击阻止覆盖？
【发布时间】：2016-10-19 14:00:55
【问题描述】：

我正在创建一个自定义对话框弹出窗口，叠加层很好，除了我的点击通过它。有没有办法让布局点击阻止？就像按钮一样。不能真正监听所有手势并手动控制它们，这意味着我必须在所有其他以点击方式的布局上阻止它们。不想使用自定义对话框功能，因为TIP: By design on iPhone, a modal page appears only in full screen和我想尽量减少android和ios之间的差异。

示例代码：

    <AbsoluteLayout>

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

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

    </AbsoluteLayout>

【问题讨论】：

如果您想阻止所有 Layout 的事件，您可以将 isUserInteractionEnabled 设置为 false - docs.nativescript.org/api-reference/classes/…
如何设置？ <StackLayout isUserInteractionEnabledProperty="false"> 不起作用。
试试isUserInteractionEnabled="false" - 没有属性
很遗憾不起作用。
嗨 Starwave 设置 isUserInteractionEnabled 到 false 应该阻止布局的事件。如果您可以提供有关您的案例的更多信息以及您需要此行为的场景，这将有所帮助。

标签： android ios layout nativescript angular2-nativescript

【解决方案1】：

从我的角度来看，刚刚找到了该任务的最佳解决方案。

只需要实现覆盖布局的虚拟触摸处理程序。

接下来将是 NativeScript Core 实现（很简单，可以移植到 NativeScript Angular 和 Vue）：

XML

   <GridLayout>

        <StackLayout class="content">
            <Label text="Some content" textWrap="true"></Label>
        </StackLayout>

        <StackLayout class="overlay" touch="onOverlayDummyTouch">
            <Label text="Loading..." textWrap="true"></Label>
        </StackLayout>

    </GridLayout>

打字稿

export function onOverlayDummyTouch(args: TouchGestureEventData) {
}

【讨论】：