Question

我试图改变 nativescript 中 progress 组件的高度，如下所示：

<Progress value="{{ progress }}" maxValue="{{totalTime}}" height="100">
</Progress>

但是高度属性没有效果。如何更改此组件的高度？

Answer 1

您可以使用height属性更改ProgressBar的高度（由于本机控件中的某些特定属性）。然而，NativeScript的一个优点是，您可以直接访问iOS和Android的本机API。所以在经过一些小的研究之后，我是如何设法改变默认比例的（可能有更好的方法 - 这是我遇到的最短的一种）。

TypeScript示例：

使用laoded事件在后面的代码中获取对进度条的引用。

<Progress minValue="0" maxValue="100" value="25" loaded="onProgressLoaded"/>

然后在后面的代码中访问本机控件

import { Progress } from 'ui/progress';
import { isAndroid, isIOS } from "platform"

declare let CGAffineTransformMakeScale: any; // or use tns-platform-declarations instead of casting to any


export function onProgressLoaded(args: EventData) {

    let progress = <Progress>args.object;

    if (isAndroid) {
        progress.android.setScaleY(5);  //  progress.android === android.widget.ProgressBar
    } else if (isIOS) {
        let transform = CGAffineTransformMakeScale(1.0, 5.0);  
        progress.ios.transform = transform; // progress.ios === UIProgressView
    }

}

可以找到完整的演示应用here

Answer 2

您可以直接设置进度元素的scaleY属性。示例：

<Progress scaleY="2" value="{{ progress }}" maxValue="{{totalTime}}" height="100"></Progress>

这将使其在垂直（Y）轴上的宽度扩大2倍。

如何在NativeScript中更改进度组件的高度

2 个答案: