egret-docs-master/extension/EUI/dataCollection/itemRenderer

前面的章节我们介绍了 DataGroup 和 List，发现里面都用到了 ItemRenderer 。它的作用实际上就是根据数据源，把当前的数据可视化的显示出来。ItemRenderer 中有一个默认的属性 data ，引擎会自动把通过 dataProvider 设置的的数据赋值给 data。 用一段代码来举例,

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

        var dataGroup:eui.DataGroup = new eui.DataGroup();
        dataGroup.dataProvider = myCollection;
        this.addChild(dataGroup);

        var exml = `
        <e:Skin xmlns:e="http://ns.egret.com/eui"> 
            <e:Image source="resource/assets/Panel/border.png"/> 
            <e:Label textColor="0xfd0000" text="{data.label}"/> 
        </e:Skin>`;

        dataGroup.itemRenderer = LabelRenderer;
        //dataGroup.itemRendererSkinName = exml;//也可以直接设置 exml 文件做为 ItemRenderer
    }
}

class LabelRenderer extends eui.ItemRenderer {
	private labelDisplay:eui.Label;
    public constructor(){
        super();
        //自定义的 ItemRenderer
        this.touchChildren = true;
        var bg = new eui.Image("resource/assets/Panel/border.png");
        this.labelDisplay = new eui.Label();
        this.labelDisplay.textColor = 0xfd0000;
        this.addChild( this.labelDisplay );
    }
    protected dataChanged():void{
    	//数据改变时，会自动调用 dataChanged 这个方法
        //显示数据中的 label 值
        this.labelDisplay.text = this.data.label;
    }
}

显示效果： 在上面的代码示例中，继承自 eui.ItemRenderer 的 LabelRenderer 类中，有一个文本行 labelDisplay 。 当数据改变时，会自动调用 dataChanged() 方法，然后 labelDisplay 会把我们想要显示的数据 this.data.label 显示出来。

如果 ItemRenderer 类中只是显示皮肤，没有自定义的逻辑方法。完全可以不创建自定义的 ItemRenderer 类，而通过 dataGroup.itemRendererSkinName() 方法直接使用 exml 描述文件来实现皮肤显示和数据绑定。显示效果完全相同，但可以少写一个类文件。

另外，像上面这个创建显示 DataGroup 的示例，也完全可以用一个 exml 文件实现，不需要写这么多代码。

class ItemRendererDemo extends eui.Group {
    constructor() {
        super();
    }
    protected createChildren() {
        super.createChildren();
        var exml = `
        <e:Skin xmlns:e="http://ns.egret.com/eui"> 
            <e:DataGroup> 
                <e:itemRendererSkinName> 
                    <e:Skin> 
                        <e:Image source="resource/assets/Panel/border.png"/> <e:Label textColor="0xfd0000" text="{data.label}"/> 
                    </e:Skin> 
                </e:itemRendererSkinName> 
                <e:ArrayCollection> 
                    <e:Array> 
                        <e:Object label="item1"/> 
                        <e:Object label="item2"/> 
                        <e:Object label="item3"/> 
                        <e:Object label="item4"/> 
                    </e:Array> 
                </e:ArrayCollection> 
            </e:DataGroup> 
        </e:Skin>`;
        var component = new eui.Component();
        component.skinName = exml;
        this.addChild(component);
    }
}