Actionscript 3 Adobe Flex 3.0中的TileList creationComplete问题

我已经做了一个列表，是Adobe Flex，如下所示

<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触发，它只针对开始时可见的分幅触发，因此在initComponents中绘制的矩形仅针对那些具有有效值的分幅绘制，并且当我使用scrollToIndex函数滚动到下一行时，这些矩形显示为以前的值。这些瓷砖不需要任何组件？但是data.name、data.class正确显示，而不是矩形，为什么会这样？什么是我应该调用initComponents的正确事件？

请参阅下面的帖子以获取答案