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

工具：EgretWing

说明：

List                   列表组件

ItemRender       列表Item组件

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

1/**
2 * Created by haocao on 15/6/25.
3 */
4class  FriendsListCase extends egret.gui.SkinnableComponent{
5    public constructor(){
6        super();
7
8        this.skinName = skins.scene.FriendsListSkin;
9        // 初始化数据
10        this.initListData();
11    }
12
13    // 绑定界面的List
14    public listview:egret.gui.List;
15
16    // 数据Array
17    private dataSource:Array<any> = [];
18
19    private initListData():void {
20        for (var i:number = 1; i < 50; i++) {
21           this.dataSource.push({name: "name"+i,phone:"a"+i,qq:"b"+i});
22        }
23    }
24
25    public partAdded(partName:string, instance:any):void {
26        super.partAdded(partName, instance);
27        if (instance == this.listview) {
28            // 绑定数据源
29            this.listview.dataProvider = new egret.gui.ArrayCollection(this.dataSource);
30           
31            // 绑定itemview
32            this.listview.itemRenderer= new egret.gui.ClassFactory(FriendItemRender);
33        }
34    }
35}
36
37/**
38 *
39 * @caohao 
40 *
41 */
42class FriendItemRender extends egret.gui.ItemRenderer{
43	    
44    public lname:egret.gui.Label;
45    public lphone:egret.gui.Label;
46    public lqq:egret.gui.Label;
47    
48    public constructor() {
49        super();
50        // 皮肤名称
51        this.skinName = skins.scene.FriendsListItemSkin;
52        this.touchChildren = true;
53    }
54    
55    public dataChanged():void{
56        // 将数据对应到组件上
57        this.lname.text = this.data.name;
58        this.lphone.text = this.data.phone;
59        this.lqq.text = this.data.qq;
60    }
61    
62}

最终效果图：

参考文章：

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