Nativescript 如何在页面级别添加活动指示器？

我想在我的登录页面中添加一个活动指示器小部件，但我希望它覆盖整个屏幕，这样我就可以防止双击登录按钮

---

任何想法，谢谢

如果将所有内容包装在GridLayout中，请将StackLayout添加为要覆盖的行中的最后一项。默认情况下，StackLayout将覆盖整个屏幕。然后可以通过数据显示/隐藏。例如：

<GridLayout>
    <StackLayout>
        // All your page content goes here! 
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
        <ActivityIndicator busy="true" />
    </GridLayout>
</GridLayout>

<!-- template -->
<Button [isEnabled]="!isAuthenticating" (tap)="submit()"></Button>

// JavaScript/TypeScript
export class LoginComponent {
  isAuthenticating = false;

  submit() {
    this.isAuthenticating = true;
    doTheActualLogin()
      .then(() => {
        this.isAuthenticating = false;
      });
  }
}

//你所有的页面内容都在这里！

---

我有一个“调光器”堆栈布局，我将其动画设置为半透明黑色，然后活动指示器位于顶部

我不确定你有什么布局，我只会从我的项目中举一个例子（以某种方式简化）

在页面内部，你可以放置这样的东西，StackLayout和ActivityIndicator都在GridLayout内部，GridLayout占据整个页面的大小

但最好将其放在已经定义的可观察对象上，您应该将其分配给bindingContext

因此，基于showLogin属性，您将看到ActivityIndicator（在整个页面上）或表单

---

不确定我是否忘了什么，但如果忘了什么，请写评论：）

活动指示器本身不会阻止表单的双重提交。除了显示ActivityIndicator，您还应该在提交期间将按钮UI组件上的

isEnabled

标志设置为

false

。例如：

<GridLayout>
    <StackLayout>
        // All your page content goes here! 
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
        <ActivityIndicator busy="true" />
    </GridLayout>
</GridLayout>

<!-- template -->
<Button [isEnabled]="!isAuthenticating" (tap)="submit()"></Button>

// JavaScript/TypeScript
export class LoginComponent {
  isAuthenticating = false;

  submit() {
    this.isAuthenticating = true;
    doTheActualLogin()
      .then(() => {
        this.isAuthenticating = false;
      });
  }
}

//JavaScript/TypeScript
导出类登录组件{
IsAuthentication=false；
提交（）{
this.isAuthentication=true；
dotheactualwin（）
.然后（（）=>{
this.isAuthentication=false；
});
}
}

---

您可以找到阻止双重提交的登录的完整实现，并在中使用ActivityIndicator。看看在具体实现中如何使用

isauthentication

标志。

Wow，感谢您的代码。。。它的工作就像一个魅力！我认为答案中的xml标记是错误的（请参见第5行）…您能修复它以供将来参考吗？谢谢：）我想应该使用结束标记

，而不是自动结束标记。顺便说一句，这个解决方案不适合我。文本字段和按钮仍然可以在调光器

堆栈面板下单击，将
（点击）=“doNothing（）”
添加到堆栈布局中。较新版本不支持调光器使我免于此问题自动关闭堆栈布局和活动指示器元素。只需将它们更改为显式关闭的版本（例如，
而不是
），它就可以正常工作。