Question

我正在寻找一种执行进度条步骤的方法，比如说注册过程。

我试图像这样将4张图像和3个标签连续放置

    <Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd">

    <ActionBar title="Register"></ActionBar>

    <AbsoluteLayout class="home-panel" width="500" height="65"
        borderColor="black" borderWidth="1">
        <Image width="50" height="50"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjuRgmqRR4U-fUyGU1Xf-Y1IEnInqqVtxm9w&usqp=CAU"
            left="10" top="5">
        </Image>
        <Image width="50" height="50"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjuRgmqRR4U-fUyGU1Xf-Y1IEnInqqVtxm9w&usqp=CAU"
            left="100" top="5">
        </Image>
        <Image width="50" height="50"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjuRgmqRR4U-fUyGU1Xf-Y1IEnInqqVtxm9w&usqp=CAU"
            left="200" top="5">
        </Image>
        <Image width="50" height="50"
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjuRgmqRR4U-fUyGU1Xf-Y1IEnInqqVtxm9w&usqp=CAU"
            left="300" top="5">
        </Image>

        <Label
            style="background-color: green; height: 20; width: 60; border-radius: 50%;"
            left="50" top="20"></Label>

        <Label
            style="background-color: green; height: 20; width: 70; border-radius: 50%;"
            left="140" top="20"></Label>

        <Label
            style="background-color: green; height: 20; width: 70; border-radius: 50%;"
            left="240" top="20"></Label>
    </AbsoluteLayout>

</Page>

但是我并不是一个真正的粉丝，首先是因为使用AbsoluteLayout使其很难在不同的屏幕上进行调整（如果是平板电脑呢？）

其次，在我看来，这是一个丑陋的解决方法，我一直在努力处理nativescript中的形状，以为它不是很友好。

我想知道是否有更好的方法？

Playground Link

Answer 1

我不确定您是否使用NativeScript内核，但是逻辑是相同的。

https://docs.nativescript.org/ui/components/progress

在文档中它显示进度条具有一个名为 value 的属性，您可以在其中输入进度条设置为多少。

您可以在视图后面或视图上控制代码，并在所需的每个页面上对其进行硬编码。

示例：

<!-- scaleY makes the bar thicker -->
<Progress value="25" maxValue="100" scaleY="15" />

有什么方法可以自定义Nativescript中的进度条？

1 个答案: