Средство визуализации мобильных элементов Flex в списке

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

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


person Zaur Guliyev    schedule 26.04.2012    source источник


Ответы (2)


сделайте все эти элементы управления в createComplete средства визуализации элементов, чтобы, если его "X", сделал источник изображения этим и т. д.

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

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

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

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

.

person JeffryHouser    schedule 26.04.2012
comment
Я пробовал то же самое, переопределив метод набора данных, но при прокрутке был беспорядок ... Вы можете привести пример использования dataChange ?! - person Zaur Guliyev; 26.04.2012
comment
@lbstr Так как вы не показали свой itemRenderer полностью, просто его фрагменты; Я решил не пытаться переписывать его, чтобы использовать метод dataChange (). Если вы можете уточнить, что означает беспорядок; Возможно, я смогу предложить другую помощь. - person JeffryHouser; 26.04.2012
comment
в случае набора данных, когда я прокручиваю список, он восстанавливает новые экземпляры элементов .. и также сбрасывает их в разных местах .. - person Zaur Guliyev; 26.04.2012
comment
@lbstr Ух, теперь понятно. Вы создаете много детей в creationComplete. Ознакомьтесь с жизненным циклом компонентов Flex по адресу: help.adobe. com / en_US / flex / using / и здесь справка. adobe.com/en_US/flex/using/. Ваши дети должны быть созданы в createChildren (); а затем размер и положение в updateDisplayList (). Когда я смешиваю дочерние элементы, созданные MXML, и дочерние элементы, созданные ActionScript; это всегда плохо кончается. Вам следует переключиться на тот или иной подход. - person JeffryHouser; 26.04.2012
comment
Я не думаю, что это происходит из-за количества детей, которых я создаю. А также, если вы посмотрите на мое создание завершено, вы увидите, что все компоненты созданы в ActionScript, в объявлениях есть только ненужные. Кстати, я не понял ваши createChildren () и updateDisplayList (), вы можете привести небольшой пример, это не обязательно в моем коде ... всего несколько строк кода будет достаточно .. - person Zaur Guliyev; 26.04.2012
comment
@lbstr Прочтите две ссылки, на которые я дал ссылку. Вот еще немного информации, которую я написал о создании мобильных itemRenderers: flextras.com/blog/index.cfm/2011/6/23/ и flextras.com/blog/index.cfm/2011/6/24/. По второй ссылке есть образцы кода. - person JeffryHouser; 26.04.2012

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

person Zaur Guliyev    schedule 26.04.2012
comment
-1 ... пока не сомневаюсь, что это работает; это не лучший подход по причинам производительности или использования памяти, и эти две вещи важны, особенно на мобильных устройствах. Правильный способ написать средство визуализации - это прослушивать событие dataChange. См. Мой ответ для более подробной информации. - person JeffryHouser; 26.04.2012