如何改變進度組件的高度NativeScript

Question

我試圖改變進步組件的高度nativescript這樣的：

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

但高度屬性沒有任何效果。如何更改此組件的高度？

Answer 1

您可以使用height屬性更改ProgressBar的高度（由於本地控件中有一些特殊情況）。 然而，NativeScript的優點之一是可以直接訪問iOS和Android的本機API。因此，在這裏進行了一些小規模的研究之後，我設法改變了默認比例（可能有更好的方法 - 這是我發現的最短的方法之一）。

打字稿例如：

使用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