解决egret引擎List虚拟布局不同高度Item对象重用时导致的布局异常问题
功能需求:聊天界面,里面有文字聊天,红包等类型的消息,不同类型的Item高度是不一样的,需要通过对象重用来优化性能
问题描述:对象重用,很自然想到 开启eui.List的虚拟布局,设置useVirtualLayout=true,但是如果itemRenderer的height高度会变化的时候,egret引擎并不支持,运行时会出现item重叠等布局异常的问题
解决办法:自己重写一个简化版的list,scroller时对象重用和显示
核心代码:
class GameList extends eui.Group{
public useVirtualLayout:boolean;
public itemRenderer;
private _itemRendererFunction:Function;
public set itemRendererFunction(itemFun:any){
this._itemRendererFunction = itemFun;
}
public get itemRendererFunction(){
return this._itemRendererFunction;
}
private scroller:eui.Scroller;
private desTop = 0;
private margin = 16;
private marginLeft = 0;
private marginBottom = 0;
private dataArr;
private pool = {
};
private itemArr = [];
private scrollTime;
public constructor() {
super();
}
public childrenCreated() {
this.scroller = <eui.Scroller>this.parent;
this.scroller = <eui.Scroller>this.parent.parent;
this.scroller.addEventListener(egret.Event.CHANGE,this.onScrollEvent,this)
this.scroller.addEventListener(eui.UIEvent.CHANGE_END,this.onScrollEndEvent,this)
}
private resetScrollV(scroller){
}
public set dataProvider(dp: eui.ArrayCollection){
this.scroller.stopAnimation();//先停止滚动中的list
// console.log("dataprovider")
this.clean();
this.setData(dp);
var _dp = (<eui.ArrayCollection>dp);
var type = eui.CollectionEvent.COLLECTION_CHANGE;
if(!_dp.hasEventListener(type)) _dp.addEventListener(type, ()=>{
if(!this.stage) return;
// console.log("dataprovider2")
this.setData(dp);
}, this);