无法制作适用于 iOS 和 Android 的进度条

Question

我正在尝试制作一个在屏幕上移动的进度条，其下方有一些文本。

这是我的模板：

<StackLayout v-else id="loadingContainer">
    <StackLayout class="progress-bar">
        <StackLayout class="progress"></StackLayout>
    </StackLayout>
    <StackLayout horizontalAlignment="center">
        <Label id="progressText" :text="loadingText" />
    </StackLayout>
</StackLayout>

这里是 CSS：

.progress-bar {
  height: 20px;
  width: 100%;
  position: relative;
  background-color: #f8f8f8;
}
.progress {
  position: relative;
  height: 100%;
  border-radius: 0px 2px 2px 0px;
  animation-name: fill;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-direction: normal;
  width: 0%;
}

@keyframes fill {
  0% {
    width: 0%;
    background-color: #6a2d91;
  }
  100% {
    width: 100%;
    background-color: #6a2d91;
  }
}

两者都按我的预期显示文本，但进度条在 iOS 和 Android 上的表现非常不同。 Android 只是一直将进度条显示为已满，从不对其进行动画处理。 iOS 显示适当的灰色背景，直到 `animation-duration 结束，然后栏才显示满，它不会动画。我在此页面上使用关键帧做其他事情，但我无法弄明白。

Answer 1

默认情况下，垂直 StackLayout 中的子组件将伸展以填充宽度。您应该在进度条布局上将 horizontalAlignment 设置为 left，尽管它在 Android、iOS horizontalAlignment / verticalAlignment 上得到了您想要的在动画期间不受尊重。

所以我建议使用 JavaScript APIs to animate Width / Height，由 Alex 提供。

您也可以使用默认值 Progress 并在内部增加值以获得类似的外观。

无法制作适用于 iOS 和 Android 的进度条

Can't make progressbar that works on iOS and Android

nativescript

nativescript-vue