在 NativeScript 应用程序中处理期间显示活动指示器

如果您在 NativeScript 应用程序中构建了一个表单，您可能需要在提交期间显示活动指示器。在本文中，我们将通过构建您在下面的 gif 中看到的示例来了解如何做到这一点。

注意：您可以查看NativeScript Playground 中的本文代码。

让我们首先看看使这些类型的 UI 成为可能的 NativeScript 控件——ActivityIndicator。

使用 ActivityIndicator 组件

NativeScript 的 ActivityIndicator 组件是一个非常简单的 UI 控件，用于显示一个旋转器。ActivityIndicator 的工作方式与任何其他 NativeScript UI 控件相同，这意味着您可以使用 NativeScript 的布局将 ActivityIndicator 放置在应用程序屏幕中的任何位置。

例如，以下代码在屏幕上堆叠了多个 ActivityIndicator。

<StackLayout>
  <ActivityIndicator color="green" busy="true"></ActivityIndicator>
  <ActivityIndicator color="blue" busy="true"></ActivityIndicator>
  <ActivityIndicator color="red" busy="true"></ActivityIndicator>
  <ActivityIndicator color="orange" busy="true"></ActivityIndicator>
  <ActivityIndicator color="purple" busy="true"></ActivityIndicator>
</StackLayout>

以下是它在设备上的样子。

定位 ActivityIndicator 的能力非常重要，因为通常您希望在屏幕的特定位置显示旋转器。

为了本文的目的，假设您正在构建一个使用以下标记的登录页面。

<StackLayout class="input-field">
  <TextField class="input" hint="Email"></TextField>
</StackLayout>

<StackLayout class="input-field">
  <TextField class="input" hint="Password"></TextField>
</StackLayout>

<Button class="btn btn-primary" text="Submit"></Button>

通过一些 CSS，该标记在设备上看起来像这样。

在这样的表单上，您可以选择几个不同的位置显示 ActivityIndicator，但在这篇文章中，我们将 ActivityIndicator 居中放置在登录表单的正中间。

下面的代码更改了之前的示例，将 UI 包围在一个父 <GridLayout> 中，并添加了一个跨越新父布局尺寸的 ActivityIndicator。

<GridLayout rows="auto, auto, auto">
  <StackLayout row="0" class="input-field">
    <TextField class="input" hint="Email"></TextField>
  </StackLayout>

  <StackLayout row="1" class="input-field">
    <TextField class="input" hint="Password"></TextField>
  </StackLayout>

  <Button row="2" class="btn btn-primary" text="Submit"></Button>

  <ActivityIndicator rowSpan="3" busy="true"></ActivityIndicator>
</GridLayout>

使用这种方法，您的表单字段将占用与之前完全相同的尺寸，但是，它们现在有一个父 <GridLayout> 容器，您可以使用它来定位 <ActivityIndicator>。最终结果看起来像这样。

您可以根据应用程序的需要随意更改 ActivityIndicator 的位置。准备好了之后，让我们看看如何绑定到 ActivityIndicator 的 busy 属性，以及如何在提交期间禁用表单控件。

提示：需要帮助掌握 NativeScript 布局？尝试在 nslayouts.com 上使用交互式教程。

适当地禁用表单控件

允许用户在提交期间使用表单不是一个好主意。您很有可能让用户感到困惑，甚至可能通过发送多个同时请求来搞砸您的后端。

幸运的是，NativeScript 的表单控件有一个易于使用的 isEnabled 属性，可以使关闭表单变得相对容易。

要开始实现这一点，您首先需要创建一个变量来跟踪对后端的请求是否正在进行。例如，在 Angular 应用程序中，您可能希望使用以下代码中的 processing 实例变量。请注意，该变量默认设置为 false，并在您启动后端处理之前设置为 true。

import { Component } from "@angular/core";

@Component({
  selector: "app-login",
  ...
})
export class LoginComponent {
  processing = false;

  submit() {
    this.processing = true;
    callMyBackendService()
      .then(() => {
        this.processing = false;
        // Handle response
      })
  }
}

创建像 processing 这样的变量的想法是，它为您提供了一个值，您可以将每个组件的 isEnabled 属性以及 <ActivityIndicator> 的 busy 属性绑定到该值。例如，以下是在 Angular 应用程序中实现此操作的方法。

<GridLayout rows="auto, auto, auto">
  <StackLayout row="0" class="input-field">
    <TextField [isEnabled]="!processing" class="input" hint="Email"></TextField>
  </StackLayout>

  <StackLayout row="1" class="input-field">
    <TextField [isEnabled]="!processing" class="input" hint="Password"></TextField>
  </StackLayout>

  <Button row="2" [isEnabled]="!processing" class="btn btn-primary" text="Submit"></Button>

  <ActivityIndicator [busy]="processing" rowSpan="3"></ActivityIndicator>
</GridLayout>

进行这些更改后，您的表单现在看起来像这样。

作为最后一步，NativeScript 提供了一个 :disabled CSS 选择器，供您为禁用的表单控件设置样式。您可以随意自定义应用程序，但通常降低 opacity 就足以直观地显示控件已禁用。

:disabled {
  opacity: 0.5;
}

这样，您的表单在提交正在进行时会稍微增加一点不透明度。

如果您添加一些来自本博客之前文章的登录表单功能，您最终将得到此示例的最终状态。

提醒一下，此示例的完整源代码可在 NativeScript Playground 上获得。如果您在使用此代码时遇到问题，或者有任何其他与活动指示器相关的提示和技巧想要分享，请随时在评论中发布。