Comment créer un dégradé vertical en flex

Question

Comment créer un dégradé vertical en flex.

Ce que j'ai actuellement est un gradient de couleur horizontal. Et ça fonctionne bien. Mais je ne peux pas comprendre comment dois-je faire verticale (qui ofcourse est l'exigence)

J'utilise styleName = « chatWindowLeftGradient »

<mx:VBox id="chatTabBarVBox" height="100%" styleName="chatWindowLeftGradient"> 

</mx:VBox> 

Et la feuille de style ressemble à ceci:

<mx:Style> 
     .chatWindowLeftGradient{       
      backgroundImage: ClassReference("custom.GradientBackground"); 
      backgroundSize: "100%"; 
      fillColors: #6db263, #a4d9a1; 
      fillAlphas: 1, 1;       
     } 

    </mx:Style> 

Ceci donne un dégradé de haut en bas. Comment je peux faire de gauche à droite ??

Cordialement Zeeshan

Answer 1

Dans Flex 3, la méthode la plus simple pour appliquer un dégradé à un élément consiste à utiliser Degrafa et son excellente classe CSSSkin. Quelques bons exemples de sa flexibilité sont ici: Nice and Easy Gradients with CSSSkin

Answer 2

Vous pouvez le faire avec une peau programmatique.

1. Créez une nouvelle classe qui hérite de Border.

2. Remplacer updateDisplayList avec quelque chose comme ceci:

   super.updateDisplayList (w, h);
   var g: Graphics = this.graphics;

   g.clear();

   var m: Matrice = nouvelle Matrice(); m.createGradientBox (w, h); g.lineStyle (0,0,0); g.beginGradientFill (GradientType.LINEAR, [couleur1, couleur2], [alpha1, alpha2], [0,0xFF], m); g.drawRect (0,0, w, h); g.endFill();

3. Référencez ce cours comme peau en utilisant ClassReference dans la section style.

Answer 3

Cela ne suffit de brancher dans votre css, mais un gradient vertical dans Flex 4 mxml ressemble à ceci:

<s:Rect right="0" top="0" width="170" bottom="0"> 
    <s:fill> 
     <mx:LinearGradient rotation="90"> 
      <mx:entries> 
       <mx:GradientEntry color="#64574A"/> 
       <mx:GradientEntry color="#FFFFCC"/> 
      </mx:entries> 
     </mx:LinearGradient> 
    </s:fill> 
</s:Rect> 

Avez-vous essayé d'ajouter une rotation = "90" à votre style?