EUI List list implements character list

A Scroll+List, drag the component to exml.

List cannot be written with a fixed height, otherwise it cannot be automatically expanded.

 

 Second, create a new List item skin, ListItemSkin skin

Under the skin of the entry: a red background Rect, avatar Image, nickname Label

 

 

The text of the name Label {data.name}

 

 

The resource of the avatar Image {data.headUrl}

 

Three code to set the data source

Encapsulate the array hero with avatar and name into ArrayCollection, and then assign it to the data source dataProvider of List.

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);
}