EUI List列表实现人物列表

一  Scroll+List ，拖动组件到exml。

List不能写定高度，不然无法自动扩展。

 

 二 新建List条目皮肤， ListItemSkin皮肤

条目皮肤下有：一个红色背景Rect，头像Image，昵称Label

 

 

名字Label的文本{data.name}

 

 

头像Image的资源{data.headUrl}

 

三  代码设置数据源

将带头像和名字的数组hero封装到ArrayCollection中，然后赋值给List的数据源dataProvider即可。

private heroList:eui.List;
public constructor() {
     super();
     this.skinName = "HomeSceneSkin";
}
    
public childrenCreated(){
     var heroArr:Array<Object> = [
     { headUrl:"off_png", name:"peter"},
     { headUrl:"off_png",name: "marry" },
     { headUrl: "off_png",name: "peter" },
     { headUrl: "off_png",name: "marry" },
     { headUrl: "off_png",name: "peter" },
     { headUrl: "off_png",name: "marry" }
     ];
        
    this.heroList.dataProvider = new eui.ArrayCollection(heroArr);
}