Flex Mobile Item Renderer in List

Question

Я использую средство визуализации элементов в гибком мобильном компоненте списка, средство визуализации элементов должно отображать разные изображения по строке в соответствии с полученными входными данными. Я делаю все эти элементы управления в createComplete средства визуализации элементов, так что если его «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> 

Код продукта Renderer:

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> 

Я думаю, что все правильно в моих кодов, но я должен добавить несколько дополнительных строк. Может ли кто-нибудь помочь мне с этой сложной линией?

Answer 1

Добавление <s:List useVirtualLayout="false"> решило проблему для меня!

Answer 2

сделать это все элементы управления в creationComplete из визуализации элементов, так что если его «X» сделать источник изображения это один и т.д.

Это проблема. Список Flex отображает только то, что отображается на экране, они не отображают то, что выключено. При повторном прокрутке рендеринга новые рендереры не создаются. Событие creationComplete больше не будет запущено для обновления рендера для отображаемых данных.

Процесс повторного использования средств визуализации называется рециркуляцией Renderer. Чтобы правильно создать средство визуализации, вы должны прослушать событие dataChange, чтобы настроить отображение рендеринга на основе данных.

Некоторые люди предпочитают переопределять установленный метод данных в itemRenderer и вносить туда свои изменения. Это также приемлемый подход.

Причина использования useVirtualLayout для работы с ложными срабатываниями заключается в том, что это говорит о том, что список отображает каждый элемент отдельно, без использования утилизации рендеринга. Это не лучший выбор для использования производительности или использования памяти на мобильных устройствах.

Please read the docs on using the data property in itemRenderers.