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

Question

我试图像这样在nativescript中更改进度组件的高度：

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

但是height属性无效。如何更改此组件的高度？

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
    }

}

完整的演示应用程序可以在这里找到