Egret之egret.gui.List的使用教程
博客专区 > flyoahc 的博客 > 博客详情
Egret之egret.gui.List的使用教程
flyoahc 发表于2年前
Egret之egret.gui.List的使用教程
  • 发表于 2年前
  • 阅读 2488
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 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

标签: egret List
共有 人打赏支持
粉丝 13
博文 37
码字总数 15728
×
flyoahc
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: