为您的 NativeScript 应用程序构建简单的进度条

进度条是常见的用户界面组件，通常看起来像这样。

在本文中，我们将了解如何轻松地为您的 NativeScript 应用程序重新创建这样的进度条，并在此过程中了解一些关于 NativeScript 布局系统的信息。

进度条标记

要创建简单的进度条，您只需要两个 NativeScript 组件，一个 <GridLayout> 作为进度条的外层容器，以及一个 <StackLayout> 作为条形填充部分。

<GridLayout columns="3*, *" class="progressbar">
  <StackLayout col="0" class="progressbar-value"></StackLayout>
</GridLayout>

此示例的关键在于 GridLayout 的 columns 属性，因为它控制进度条的宽度，但让我们首先添加一些 CSS 以使这些控件看起来像进度条。

.progressbar {
    height: 50;
    margin: 10;
    border-radius: 10;
    border-color: black;
    border-width: 1;
}
.progressbar-value {
    background: #337ab7;
}

有了这些 CSS，您应该会看到一个如下所示的进度条。

如果您比我更有设计天赋，您可能想尝试不同的颜色，甚至可以尝试使用 NativeScript 对线性渐变背景的新支持。

为了让您了解可能的样式，这里有一个使用一些替代 CSS 的相同进度条的略微不同的外观。

.progressbar {
    height: 30;
    margin: 10;
    border-radius: 10;
    background: #ECEFF1;
}
.progressbar-value {
    background: #51BC6B;
}

无论您选择如何设置进度条的样式，接下来您需要做的是想出一个控制条形宽度的方法。让我们看看如何做到这一点。

进度条逻辑

为了解释这是如何工作的，让我们回到此示例的标记。

<GridLayout columns="3*, *" class="progressbar">
  <StackLayout col="0" class="progressbar-value"></StackLayout>
</GridLayout>

在此示例中，GridLayout 指定了两列，一列宽度为 3*，另一列宽度为 *。这创建了四个宽度单位，并将三个分配给第一列，一个分配给第二列。这就是为什么在我们的示例中条形占据了整体宽度的 75%。

要使此宽度动态化，您只需在 JavaScript 或 TypeScript 中动态分配该宽度即可。使用 Angular，该代码看起来有点像这样。

<GridLayout [columns]="columns" class="progressbar">
  <StackLayout col="0" class="progressbar-value"></StackLayout>
</GridLayout>

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

@Component({
    ...
})
export class ItemsComponent implements OnInit {
  columns;

  ngOnInit(): void {
    this.setProgressbarWidth(20);
  }
}

  setProgressbarWidth(percent) {
    this.columns = percent + "*," + (100 - percent) + "*";
  }
}

在这里，您将 GridLayout 的 columns 属性绑定到 Angular 组件中的 columns 属性。

在组件中，您还定义了一个 setProgressbarWidth() 方法，该方法接受一个 0-100 的整数并将属性设置为相应的值。

注意：如果您不完全清楚 setProgressbarWidth() 的作用，请尝试使用一些特定值运行逻辑。例如，如果您传入 70，则该方法将 columns 属性设置为 70*,30*；如果您传入 50，则该方法将 columns 属性设置为 50*,50*。

使用此代码，您现在可以轻松地使用 TypeScript 代码将进度条的宽度设置为百分比宽度。例如，上面的代码呈现了一个如下所示的进度条。

要使进度条移动，您需要做的就是使用新值调用 setProgressbarWidth()。例如，以下代码将进度条从 0 移动到 100。

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

@Component({
  ..
})
export class ItemsComponent implements OnInit {
  columns;

  ngOnInit(): void {
    let percent = 0;
    let intervalId = setInterval(() => {
      this.setProgressbarWidth(percent);
      percent++;
      if (percent > 100) {
        clearInterval(intervalId);
      }
    }, 50);
  }

  setProgressbarWidth(percent) {
    this.columns = percent + "*," + (100 - percent) + "*";
  }
}

总结

希望本文能让您了解如何在自己的应用程序中实现进度条，甚至可能了解一些 NativeScript 的 GridLayout 的工作原理。

如果您想做一些更自定义的操作，请随时修改此示例代码，如果您想出了很酷的东西，请务必在评论中发布 🙂

注意：NativeScript 开发专家 Alex Ziskind 为本文创建了一个很棒的后续文章，包括对语法的改进以及一些有趣的动画技巧。 查看它！