Question

我想在登录页面添加一个活动指示器小部件，但我想覆盖整个屏幕，所以我可以防止双击“登录”按钮。

任何想法，谢谢！

Answer 1

如果将所有内容都包装在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>

我有一个＆＃34;调光器＆＃34; StackLayout我将其设为半透明黑色，然后活动指示器位于顶部。

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

但最好是将已经定义的Observable放入bindingContext

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

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

Answer 3

活动指标本身不会阻止您提交表单的双重提交。除了显示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中使用ActivityIndicator。看看this login folder中isAuthenticating标志如何用于特定实现。

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

3 个答案: