couleur de fond ListItemRenderer

Question

En utilisant Flex4, j'ai une liste avec un élément moteur de rendu:

<mx:List id="queueView" dataProvider="{presenter.queue.items}"> 
    <mx:itemRenderer> 
    <fx:Component> 
     <mx:VBox> 
     <mx:Label text="{data.name}"/> 
     <mx:Label text="{data.artist.name}"/> 
     </mx:VBox> 
    </fx:Component> 
    </mx:itemRenderer> 
</mx:List> 

J'alternance des couleurs sur la liste:

#queueView 
{ 
    alternating-item-colors: red, yellow; 
} 

mais les éléments de liste rendent toujours avec un fond blanc (il rend les couleurs correctement si je me débarrasse du rendu).

Si je mets contentBackgroundColor = "red" sur le itemRenderer, chaque élément est rouge. Le compilateur n'accepte pas les transparents.

Comment puis-je faire en sorte que itemRenderer respecte les couleurs alternatives de la liste?

Answer 1

Cela semble fonctionner correctement pour moi. Voici mon code:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" xmlns:components="components.*"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

      [Bindable] 
      public var items:ArrayCollection = new ArrayCollection([{name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}, 
                    {name:"foo",value:"bar"}]); 

     ]]> 
    </fx:Script> 


    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/halo"; 
     @namespace components "components.*"; 

     #queueView 
     { 
      alternating-item-colors: red, yellow; 
     } 
    </fx:Style> 

    <mx:List id="queueView" dataProvider="{items}" width="200"> 
     <mx:itemRenderer> 
      <fx:Component> 
       <mx:VBox> 
        <mx:Label text="{data.name}"/> 
        <mx:Label text="{data.value}"/> 
       </mx:VBox> 
      </fx:Component> 
     </mx:itemRenderer> 
    </mx:List>  
</s:Application> 

Et voici le résultat:

result http://i38.tinypic.com/10wkzs8.jpg

Qu'est-ce que la construction Courez-vous? Je cours la dernière version bêta publiée ces dernières semaines. Construire 4.0.0.253292 pour être exact. Vous pouvez essayer de mettre à jour la dernière version si vous ne l'avez pas déjà fait et vous pouvez également essayer de nettoyer votre projet. Assurez-vous également que votre navigateur ne met pas en cache le swf, ce qui arrive parfois lorsque la taille du fichier ne change pas radicalement.

S'il vous plaît laissez-moi savoir si j'ai raté quelque chose. Mais votre code semble fonctionner correctement.