[英]Flex Mobile Item Renderer in List
我在flex mobile List组件中使用了项目渲染器,该项目渲染器必须根据接收到的输入数据逐行显示不同的图像。 我在item renderer的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>
我认为代码中的所有内容都是正确的,但是我必须添加一些额外的行。 有人可以帮我解决那棘手的问题吗?
在item renderer的creationComplete中执行所有这些控件,以便如果其“ X”作为图像源,则以此类推。
那是个问题。 弹性列表仅呈现屏幕上显示的内容,而不呈现屏幕外的内容。 滚动渲染器可重复使用时,不会创建新的渲染器。 不会再次触发creationComplete事件以更新正在显示的数据的渲染。
重用渲染器的过程称为渲染器回收。 要正确创建渲染器,您必须侦听dataChange事件以根据数据调整渲染器的显示。
有些人喜欢覆盖itemRenderer中的set数据方法,然后在此处进行更改。 这也是一种同样可以接受的方法。
将useVirtualLayout设置为false的原因是,它告诉列表单独渲染每个项目,而不使用渲染器回收。 由于性能或内存使用原因,这不是最佳选择。
添加<s:List useVirtualLayout="false">
为我解决了这个问题!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.