Comment changer la hauteur du composant de progression dans NativeScript

Question

Je suis en train de changer la hauteur du composant de progression dans nativescript comme ceci:

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

Mais la propriété de la hauteur n'a pas d'effet. Comment changer la hauteur de ce composant?

Answer 1

Vous pouvez modifier la hauteur de ProgressBar à l'aide de la propriété height (en raison de certains caractères spécifiques dans les contrôles natifs). Cependant, l'un des principaux avantages de NativeScript est que vous avez un accès direct aux API natives pour iOS et Android. Donc, après quelques petites recherches, voici comment j'ai réussi à changer l'échelle par défaut (il pourrait y avoir des approches encore meilleures - c'est l'un des plus courts que j'ai rencontrés).

exemple tapuscrit:

Utilisez l'événement laoded pour obtenir la référence à votre barre de progression dans le code sous-jacent.

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

Puis dans le code derrière l'accès aux contrôles natifs

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 
    } 

} 

application de démonstration complète peut être trouvé here