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

Question

我正在尝试更改 nativescript 中 progress 组件的高度，如下所示:

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

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

Answer 1

您可以使用 height 属性更改 ProgressBar 的高度(由于 native 控件中的某些特殊性)。然而，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