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会显示适当的灰色背景，直到“动画持续时间”结束，然后该条只会显示完整，而不会对其进行动画处理。我在此页面上有关键帧在做其他事情，但我无法弄清楚。

Answer 1

默认情况下，垂直StackLayout中的默认子组件将伸展以填充宽度。您应该在进度条布局上将horizontalAlignment设置为left，尽管它可以在Android上获得所需的效果，但在iOS上horizontalAlignment / verticalAlignment在动画制作过程中不受尊重。

所以我建议使用Alex提出的JavaScript APIs to animate Width / Height。

您还可以使用默认的Progress并增加内部的值以实现相似的外观。

无法制作可在iOS和Android上使用的进度条

1 个答案: