Egret之egret.gui.List的使用教程

工具：EgretWing

说明：

List                   列表组件

ItemRender       列表Item组件

这里只讲解一下如何绑定数据到List以及对应到ItemRender展示。

/**
 * Created by haocao on 15/6/25.
 */
class  FriendsListCase extends egret.gui.SkinnableComponent{
    public constructor(){
        super();

        this.skinName = skins.scene.FriendsListSkin;
        // 初始化数据
        this.initListData();
    }

    // 绑定界面的List
    public listview:egret.gui.List;

    // 数据Array
    private dataSource:Array<any> = [];

    private initListData():void {
        for (var i:number = 1; i < 50; i++) {
           this.dataSource.push({name: "name"+i,phone:"a"+i,qq:"b"+i});
        }
    }

    public partAdded(partName:string, instance:any):void {
        super.partAdded(partName, instance);
        if (instance == this.listview) {
            // 绑定数据源
            this.listview.dataProvider = new egret.gui.ArrayCollection(this.dataSource);
           
            // 绑定itemview
            this.listview.itemRenderer= new egret.gui.ClassFactory(FriendItemRender);
        }
    }
}

/**
 *
 * @caohao 
 *
 */
class FriendItemRender extends egret.gui.ItemRenderer{
	    
    public lname:egret.gui.Label;
    public lphone:egret.gui.Label;
    public lqq:egret.gui.Label;
    
    public constructor() {
        super();
        // 皮肤名称
        this.skinName = skins.scene.FriendsListItemSkin;
        this.touchChildren = true;
    }
    
    public dataChanged():void{
        // 将数据对应到组件上
        this.lname.text = this.data.name;
        this.lphone.text = this.data.phone;
        this.lqq.text = this.data.qq;
    }
    
}

最终效果图：

参考文章：

http://bbs.egret-labs.org/thread-1055-1-1.html