1

我在 flex mobile List 组件中使用了一个项目渲染器，项目渲染器必须根据接收到的输入数据逐行显示不同的图像。我在项目渲染器的 creationComplete 中执行这些所有控件，以便如果它的“X”使图像的源成为这个等等。但是当我在创建列表后滚动它时，它会重置项目但以不同的顺序，所以如果“Item1”是在列表的第一行滚动后它会转到最后一行，最后一行排在第一位。

列出组件代码：

<s:List id="lst" dataProvider="{dp}" width="100%" height="100%" 
        itemRenderer="renderer.YataklarViewRenderer"
        contentBackgroundAlpha="0" borderColor="#FFFFFF" borderVisible="true" >

    <s:layout>
        <s:VerticalLayout 
            horizontalAlign="center" 
            paddingBottom="10"
            paddingTop="10"
            paddingLeft="10"
            paddingRight="10"
            />
    </s:layout>
</s:List>

项目渲染器代码：

protected function yataklarItem_creationCompleteHandler(event:FlexEvent):void
            {
                trace("Creation complete: "+ data['servisAdi']);    


                var servisAdi:String = data['servisAdi'];

                //header text ekle
                this.addElement(header);
                header_text.text = servisAdi;


                var odalar:ArrayCollection = new ArrayCollection();

                odalar = data['odalar'];

                for(var i:int=0;i<odalar.length;i++){



                    var mainContent:VGroup = new VGroup();
                    //                  mainContent.paddingBottom
                    mainContent.percentWidth = 100;
                    mainContent.percentWidth = 100;
                    mainContent.horizontalAlign = "center";
                    mainContent.verticalAlign = "middle";


                    var hContent:HGroup = new HGroup();
                    hContent.percentWidth = 100;
                    hContent.verticalAlign = "middle";
                    hContent.horizontalAlign = "left";


                    var col1:HGroup = new HGroup();
                    col1.percentWidth = 10;
                    col1.verticalAlign = "middle";
                    col1.horizontalAlign = "center";

                    var col2:HGroup = new HGroup();
                    col2.percentWidth = 20;
                    col2.verticalAlign = "middle";
                    col2.horizontalAlign = "center";


                    var imgCol:Image = new Image();
                    var txtOdaAdi:Label = new Label();

                    var oda:Object = new Object();
                    oda = odalar.getItemAt(i);

                    var odaAdi:String = oda['odaAdi'];
                    var baskinCinsiyyet:String = oda['baskinCinsiyet'];

                    txtOdaAdi.text = odaAdi;
                    imgCol.source = "images/yataklar/baskin"+baskinCinsiyyet+".png";

                    col1.addElement(imgCol);
                    col2.addElement(txtOdaAdi);


                    var ytk:ArrayCollection = new ArrayCollection();
                    ytk = oda['yataklar'];

                    var yataklarCol:HGroup = new HGroup();
                    yataklarCol.percentWidth = 70;
                    yataklarCol.horizontalAlign = "left";
                    yataklarCol.verticalAlign = "center";


                    for( var j:int=0;j<ytk.length;j++){

                        var yatakG:VGroup = new VGroup();
                        yatakG.gap = 5;
                        yatakG.horizontalAlign = "center";
                        yatakG.verticalAlign = "middle";

                        var yatak:Object = new Object();
                        yatak = ytk.getItemAt(j);

                        var yatakNo:int = yatak['yatakNo'];
                        var durumu:String = yatak['durumu'];

                        //uzerine tiklandiginda
                        var vizitId:String = yatak['vizitId'];
                        var hastaId:String = yatak['hastaId'];
                        var adiSoyadi:String = yatak['adiSoyadi'];


                        var txtYatakNo:Label = new Label();
                        txtYatakNo.text = yatakNo.toString();

                        var imgYatakImg:Image = new Image();
                        imgYatakImg.source = "images/yataklar/yatak"+durumu+".png";

                        yatakG.addElement(imgYatakImg);
                        yatakG.addElement(txtYatakNo);


                        yataklarCol.addElement(yatakG);
                    }


                    hContent.addElement(col1);
                    hContent.addElement(col2);
                    hContent.addElement(yataklarCol);

                    mainContent.addElement(hContent);
                    mainContent.addElement(line);

                    this.addElement(mainContent);
                }




            }
<fx:Declarations>


        <s:Group id="header" width="100%" height="50">

            <s:Rect 
                width="100%" height="100%">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0x314F83" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>

            <s:VGroup id="vgt" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" gap="10" width="100%" 
                      verticalAlign="middle" horizontalAlign="left" height="100%">
                <s:Label id="header_text" color="#FFFFFF" verticalAlign="middle" height="100%"/> 
            </s:VGroup>

        </s:Group>


        <s:Line id="line" width="100%">
            <s:stroke>
                <s:SolidColorStroke color="0x5b5b5b" weight="2"/>
            </s:stroke>
        </s:Line>






    </fx:Declarations>


    <s:layout>
        <s:VerticalLayout verticalAlign="top" horizontalAlign="center" />       
    </s:layout>

我认为我的代码中的一切都是正确的，但我必须添加一些额外的行。谁能帮我解决这条棘手的问题？

4

2 回答 2

1

在项目渲染器的 creationComplete 中执行这些所有控件，以便如果它的“X”使图像源成为这个，等等。

那是个问题。Flex 列表仅渲染屏幕上显示的内容，它们不渲染屏幕外的内容。当您滚动渲染器被重新使用时，不会创建新的渲染器。将不会再次触发 creationComplete 事件来更新正在显示的数据的渲染。

重用渲染器的过程称为渲染器回收。要正确创建渲染器，您必须侦听 dataChange 事件以根据数据调整渲染器显示。

有些人喜欢覆盖 itemRenderer 中的 set data 方法并在那里进行更改。这也是一种同样可以接受的方法。

将 useVirtualLayout 设置为 false 的原因是因为它告诉列表单独渲染每个项目而不使用渲染器回收。由于移动设备的性能或内存使用原因，这不是最佳选择。

请阅读有关在 itemRenderers 中使用 data 属性的文档。

于 2012-04-26T13:46:35.567 回答
0

添加<s:List useVirtualLayout="false">解决了我的问题！

于 2012-04-26T12:23:26.573 回答