egret记录：数据容器DataGroup与List的使用

class DataGroupDemo extends eui.UILayer {
    public constructor() {
        super();
    }
    //数据源
    private datas:eui.ArrayCollection;
    //数据容器
    private datagroup:eui.DataGroup;

    protected createChildren():void {
        //先创建一个数组
        var sourceArr:any[] = [];
        for (var i:number = 1; i < 15; i++){
            //给数据中添加一个含有"label"属性的对象
            sourceArr.push({label:"item_"+i});
        }
        //用ArrayCollection包装
        var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);
        this.datas = myCollection;

        //创建滚动视图
        let sc:eui.Scroller = new eui.Scroller();
        sc.width = 200;
        sc.height = 300;
        this.addChild(sc);
       
        // 创建数据容器 将数据容器添加到scroller中
        var dataGroup:eui.DataGroup = new eui.DataGroup();
        dataGroup.percentWidth = 100;
        dataGroup.percentHeight = 100;
        sc.addChild(dataGroup);
        sc.viewport = dataGroup;

        dataGroup.dataProvider = myCollection;
        dataGroup.itemRenderer = LabelRenderer;
        this.datagroup = dataGroup;

        let button:eui.Button = new eui.Button();
        button.x = 30;
        button.y = 500;
        this.addChild(button)

        button.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onClick,this);
    }


    private onClick(){
        this.datagroup.dataProvider.getItemAt(0).label = "XXXX";
        // 更新视图
        this.datas.itemUpdated(this.datas.getItemAt(0));
    }
}

点击按钮之后，会改变数据源中的一条数据的值。但是这里需要值得注意的是，如果你的这个数据源对应的item没有渲染，那么就不会马上更新视图，否则的话才会更新视图。才会调用datachange函数。

 

 

class LabelRenderer extends eui.ItemRenderer {
    private labelDisplay:eui.Label;
    public constructor(){
        super();
        this.touchChildren = true;
        this.labelDisplay = new eui.Label();
        this.addChild( this.labelDisplay );
    }
    protected dataChanged():void{
        //显示数据中的 label 值
        this.labelDisplay.text = this.data.label;
        console.log("datachanged");
        
    }
}