2010-07-03 62 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()的正確事件?

回答