TileList 创建 Adob​​e Flex 3.0 中的完整问题

Question

我已经制作了一个 Adob​​e 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>

问题是不会为每个 PageImageRenderer 触发creationComplete 事件，并且仅针对开始时可见的图块触发该事件，因此在 initComponents() 中绘制的矩形仅针对具有有效值的图块绘制，当我使用scrollToIndex()函数滚动到下一行时，矩形将显示以前的值。并且没有为这些图块调用 initComponents() ？但是 data.name、data.class 正确显示，但矩形不正确，为什么会这样？我应该调用 initComponents() 的正确事件是什么？

Answer 1

请参阅以下帖子以获得答案

www.codeproblem.com