如何在页面级别添加 activity-indicator？

Question

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

任何想法，谢谢！

Answer 1

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

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

我有一个 "dimmer" StackLayout，我将其设置为半透明黑色，然后 Activity 指示器位于顶部。

Answer 2

不确定你有什么布局我只会放我项目中的例子（某种程度上简化）

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

  <GridLayout rows="*" columns="*">

      <StackLayout  visibility="{{ showLogin ? 'visible' : 'collapse'}}" row="0" column="0">
          <!--Login form, as you have defined-->
      </StackLayout>
       
       <!--Indicator on whole page, colSpan and rowSpan force ActivityIndicator to takes whole page-->
      <ActivityIndicator visibility="{{ !showLogin ? 'visible' : 'collapse'}}" busy="{{ !showLogin }}" rowSpan="1" colSpan="1"  row="0" column="0" />

  </GridLayout>

里面javascript代码

/*somehow add showLogin property to bindingContext*/
page.bindingContext.set("showLogin",false) //false for show ActivityIndicator

/*or*/
page.bindingContext.set("showLogin",true) //true for show form

但最好是将其放入您应该分配给 bindingContext 的已经定义的 Observable

因此基于 showLogin 属性您将在 ActivityIndicator（在整个页面上）或表单中可见

不确定我是否忘记了什么，但如果有什么，写评论 :)

Answer 3

activity 指示器本身不会阻止双重提交您的表单。除了显示 ActivityIndicator 之外，您还应该在提交期间将 Button UI 组件上的 isEnabled 标志设置为 false。例如：

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

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

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

你可以在NativeScript Groceries sample. Take a look at how the isAuthenticating flag is used in this login folder中找到一个完整的防止双重提交的登录实现，使用ActivityIndicator实现。

如何在页面级别添加 activity-indicator？

How to add an activity-indicator on a page level?

nativescript