2010-07-03 67 views
0

我已经做了平铺列表是Adobe的Flex如下在Adobe的Flex的TileList creationComplete问题3.0

<mx:TileList height="130" width="636" rowCount="1" 
    columnCount="8" columnWidth="150" direction="horizontal" 
    allowMultipleSelection="false" enabled="true" borderStyle="solid" 
    id="profilelist" verticalScrollPolicy="off" dataProvider="{xmlListColl}" itemRenderer="PageImageRenderer" cornerRadius="5" alpha="1.0" themeColor="#8791F3" x="36.5" y="29" change="openThisPage(event)"> 
    </mx:TileList> 

这里是PageImageRenderer

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="146" height="130" creationComplete="{initComponents()}"> 
<mx:Script> 
    <![CDATA[ 
     import mx.controls.Alert; 

     private function initComponents():void 
     { 
      var rectWidth:uint = 75; 
      var rectHeight:uint = 10; 
      var profilePopularity:Number = data.popularity; 
      var gradientFillColors:Array = [0x000000,0x000000]; 
      var gradientAlpha:Array = [1,1]; 
      var gradientRatio:Array = [220,255]; 
      var fillAreaWidth:uint = 0; 

      this.graphics.lineStyle(1,0x000000); 
      this.graphics.moveTo(70,70); 
      this.graphics.lineTo(70+rectWidth,70); 
      this.graphics.lineTo(70+rectWidth,70+rectHeight); 
      this.graphics.lineTo(70,70+rectHeight); 
      this.graphics.lineTo(70,70); 
      this.graphics.lineStyle(); 
      //border of rectangle has been drawn 

      //first calculate the width of filled area 
      fillAreaWidth = (rectWidth * profilePopularity)/100; 

      //now on the basis of popularity set the colors and width of filling area 
      if(profilePopularity<=10) 
      { 

       gradientFillColors[0] = 0x8ebc03; 
       gradientFillColors[1] = 0xc9f936; 

      } 
      else if(profilePopularity>10 && profilePopularity<=40) 
      { 

       gradientFillColors[0] = 0xe7e405; 
       gradientFillColors[1] = 0xf9f768; 
      } 
      else if(profilePopularity>40 && profilePopularity<=60) 
      { 

       gradientFillColors[0] = 0xeeb00a; 
       gradientFillColors[1] = 0xfbcf57; 
      } 
      else if(profilePopularity>60 && profilePopularity<=75) 
      { 

       gradientFillColors[0] = 0xb38404; 
       gradientFillColors[1] = 0xecad05; 
      } 
      else if(profilePopularity>75 && profilePopularity<=90) 
      { 

       gradientFillColors[0] = 0xf2a010; 
       gradientFillColors[1] = 0xf3b851; 
      } 
      else if(profilePopularity>90 && profilePopularity<=99) 
      { 

       gradientFillColors[0] = 0xec4004; 
       gradientFillColors[1] = 0xf18964; 
      } 
      else if(profilePopularity==100) 
      { 
       gradientFillColors[0] = 0xff0000; 
       gradientFillColors[1] = 0xff8a00; 
      } 

      this.graphics.beginGradientFill(GradientType.LINEAR,gradientFillColors,gradientAlpha,gradientRatio); 

      this.graphics.drawRect(70, 71, fillAreaWidth, rectHeight-1); 

      this.graphics.endFill(); 
     } 
    ]]> 
</mx:Script> 
    <!-- Effects --> 
    <mx:Fade id="fadeIn" duration="2500" alphaFrom="0" alphaTo="1"/> 
    <mx:Fade id="fadeOut" duration="2500" alphaFrom="1" alphaTo="0"/> 

    <!-- Images and labels --> 
    <mx:Image source="{data.thumbnail}" x="10" y="10" height="48" width="48" completeEffect="{fadeIn}"/> 
    <mx:Label x="68" y="10" text="{data.name}" width="71"/> 
    <mx:Label x="68" y="27" text="{data.class}"/> 
    <mx:Label x="68" y="44" text="{data.school}"/> 

</mx:Canvas> 

代码问题creationComplete事件不为每个PageImageRenderer触发,并且它仅在启动时触发,因此只在具有有效值的tile中绘制initComponents()中绘制的矩形,并且当使用scrollToIndex()函数滚动到下一行时,会显示矩形与以前的值。并没有initComponents()被称为这些瓷砖?但data.name,data.class正确显示,但不是矩形,它为什么如此?什么是我应该调用initComponents()的正确事件?

回答