eui.DataGroup
包 eui
类 public class DataGroup
继承 eui.DataGroup → eui.Group → egret.DisplayObjectContainer → egret.DisplayObject → egret.EventDispatcher → egret.HashObject
子类 eui.ListBase
DataGroup 类将数据项目转换为可视元素以进行显示。尽管此容器可以包含可视元素，但它通常仅用于包含作为子项的数据项目。
公共属性
| 属性 |
|---|
| dataProvider : eui.ICollection 列表数据源，请使用实现了ICollection接口的数据类型，例如 ArrayCollection |
| itemRenderer : any 用于数据项目的项呈示器 |
| itemRendererFunction : (item:any)=>any 为某个特定数据项返回一个项呈示器类定义的函数 |
| itemRendererSkinName : any 条目渲染器的可选皮肤标识符 |
| numElements : number 布局元素子项的数量 |
| useVirtualLayout : boolean 若要配置容器使用虚拟布局，请为与容器关联的布局的 useVirtualLayout 属性设置为 true |
公共方法
| 方法 |
|---|
| DataGroup() 构造函数 |
| getElementAt(index:number):egret.DisplayObject 获取一个布局元素子项 |
| getVirtualElementAt(index:number):eui.UIComponent |
| invalidateSize():void 标记提交过需要验证组件尺寸，以便在稍后屏幕更新期间调用该组件的 measure() 方法 |
| setVirtualElementIndicesInView(startIndex:number,endIndex:number):void 在支持虚拟布局的容器中，设置容器内可见的子元素索引范围 |
| updateRenderer(renderer:eui.IItemRenderer,itemIndex:number,data:any):eui.IItemRenderer 此方法首先会准备项呈示器以重用，方法是清除任何旧属性，同时使用新属性进行更新 |
事件
| Events |
|---|
| egret.Event.RESIZE 当UI组件的尺寸发生改变时调度 |
| eui.UIEvent.MOVE 当UI组件在父级容器中的位置发生改变时调度 |
| eui.UIEvent.CREATION_COMPLETE 当UI组件第一次被添加到舞台并完成初始化后调度 |
| egret.Event.ADDED 将显示对象添加到显示列表中时调度。 |
| egret.Event.ADDED_TO_STAGE 在将显示对象直接添加到舞台显示列表或将包含显示对象的子树添加至舞台显示列表中时调度。 |
| egret.Event.REMOVED 将要从显示列表中删除显示对象时调度。 |
| egret.Event.REMOVED_FROM_STAGE 在从显示列表中直接删除显示对象或删除包含显示对象的子树时调度。 |
| egret.Event.ENTER_FRAME [广播事件] 播放头进入新帧时调度。 |
| egret.Event.RENDER [广播事件] 将要更新和呈现显示列表时调度。 |
| egret.TouchEvent.TOUCH_MOVE 当用户触碰设备时进行调度，而且会连续调度，直到接触点被删除。 |
| egret.TouchEvent.TOUCH_BEGIN 当用户第一次触摸启用触摸的设备时（例如，用手指触摸手机屏幕）调度。 |
| egret.TouchEvent.TOUCH_END 当用户移除与启用触摸的设备的接触时（例如，将手指从屏幕上抬起）调度。 |
| egret.TouchEvent.TOUCH_TAP 当用户在启用触摸设备上的已启动接触的同一 DisplayObject 实例上抬起接触点时（例如，手机点击屏幕后抬起）调度。 |
| egret.TouchEvent.TOUCH_RELEASE_OUTSIDE 当用户在启用触摸设备上的已启动接触的不同 DisplayObject 实例上抬起接触点时（例如，按住屏幕上的某个对象,然后从它上面挪开后再松开手指）调度。 |
属性详细信息
dataProvider
dataProvider : eui.ICollection
- 支持版本:eui 1.0
- 运行平台:Web,Native
列表数据源，请使用实现了ICollection接口的数据类型，例如 ArrayCollection
itemRenderer
itemRenderer : any
- 支持版本:eui 1.0
- 运行平台:Web,Native
用于数据项目的项呈示器。您应该直接为此属性赋值自定义类的类定义，而不是一个实例。注意：该类必须实现 IItemRenderer 接口。
rendererClass获取顺序：itemRendererFunction > itemRenderer > 默认ItemRenerer。
itemRendererFunction
itemRendererFunction : (item:any)=>any
- 支持版本:eui 1.0
- 运行平台:Web,Native
为某个特定数据项返回一个项呈示器类定义的函数。rendererClass获取顺序：itemRendererFunction > itemRenderer > 默认ItemRenerer。
itemRendererSkinName
itemRendererSkinName : any
- 支持版本:eui 1.0
- 运行平台:Web,Native
条目渲染器的可选皮肤标识符。在实例化itemRenderer时，若其内部没有设置过skinName,则将此属性的值赋值给它的skinName。注意:若 itemRenderer 不是 Component 的子类，则此属性无效。
numElements
numElements : number
- 支持版本:eui 1.0
- 运行平台:Web,Native
布局元素子项的数量。
useVirtualLayout
useVirtualLayout : boolean = false
- 支持版本:eui 1.0
- 运行平台:Web,Native
若要配置容器使用虚拟布局，请为与容器关联的布局的 useVirtualLayout 属性设置为 true。只有布局设置为 VerticalLayout、HorizontalLayout 或 TileLayout 的 DataGroup 才支持虚拟布局。不支持虚拟化的布局子类必须禁止更改此属性。
方法详细信息
DataGroup()
public DataGroup()
构造函数。
- 支持版本:eui 1.0
- 运行平台:Web,Native
getElementAt()
public getElementAt(index:number):egret.DisplayObject
获取一个布局元素子项。
- 支持版本:eui 1.0
- 运行平台:Web,Native
- 参数
- index:number
getVirtualElementAt()
public getVirtualElementAt(index:number):eui.UIComponent
- 支持版本:eui 1.0
- 运行平台:Web,Native
- 参数
- index:number
invalidateSize()
public invalidateSize():void
标记提交过需要验证组件尺寸，以便在稍后屏幕更新期间调用该组件的 measure() 方法。Invalidation 是一个很有用的机制，可将组件更改延迟到稍后屏幕更新时进行处理，从而消除了重复的工作。例如，要更改文本和字体大小，如果在更改文本后立即进行更新，然后在设置大小后再更新大小，就有些浪费。更改两个属性后再使用新的大小一次性呈示文本，效率会更高。很少调用 Invalidation 方法。通常，在组件上设置属性会自动调用合适的 invalidation 方法。
- 支持版本:eui 1.0
- 运行平台:Web,Native
setVirtualElementIndicesInView()
public setVirtualElementIndicesInView(startIndex:number,endIndex:number):void
在支持虚拟布局的容器中，设置容器内可见的子元素索引范围。此方法在不支持虚拟布局的容器中无效。通常在即将重新布局子项之前会被调用一次，容器覆盖此方法提前释放已经不可见的子元素。
updateRenderer()
public updateRenderer(renderer:eui.IItemRenderer,itemIndex:number,data:any):eui.IItemRenderer
此方法首先会准备项呈示器以重用，方法是清除任何旧属性，同时使用新属性进行更新。最后，此方法应对项呈示器设置 data 属性。
- 支持版本:eui 1.0
- 运行平台:Web,Native
- 参数
- renderer:eui.IItemRenderer - 项呈示器。
- itemIndex:number - 数据提供程序中的数据索引。
- data:any - 此项呈示器正在表示的数据对象。
示例
**
* 下面的例子演示了两种方法来创建 DataGroup。
*/
class DataGroupExample extends egret.Sprite {
public constructor() {
super();
this.createDataGroupByTypeScript();
this.createDataGroupByEXML();
}
private createDataGroupByTypeScript():void {
var dataGroup = new eui.DataGroup();
dataGroup.layout = new eui.VerticalLayout();
dataGroup.itemRenderer = LabelRender;
var collection = new eui.ArrayCollection();
collection.addItem({"label": "1", "color": 0xcc9999});
collection.addItem({"label": "2", "color": 0xff9966});
collection.addItem({"label": "3", "color": 0xcc3333});
collection.addItem({"label": "4", "color": 0xff6666});
dataGroup.dataProvider = collection;
this.addChild(dataGroup);
dataGroup.x = 50;
dataGroup.y = 50;
}
private createDataGroupByEXML():void {
var exml =
`<e:DataGroup class="Example.DataGroup" xmlns:e="http:/ns.egret.com/eui" x="300" y="50">
<e:layout>
<e:VerticalLayout gap="20"/>
</e:layout>
<e:itemRendererSkinName>
<e:Skin>
<e:Label text="{data.label}" textColor="{data.color}"/>
</e:Skin>
</e:itemRendererSkinName>
<e:ArrayCollection>
<e:Array>
<e:Object label="a" color="0xcc9999"/>
<e:Object label="b" color="0xff9966"/>
<e:Object label="c" color="0xcc3333"/>
<e:Object label="d" color="0xff6666"/>
</e:Array>
</e:ArrayCollection>
</e:DataGroup>`;
var clazz = EXML.parse(exml);
var dataGroup2:eui.DataGroup = new clazz();
this.addChild(dataGroup2);
}
}
class LabelRender extends eui.ItemRenderer {
private label:eui.Label;
public constructor() {
super();
this.label = new eui.Label();
this.addChild(this.label);
}
public dataChanged() {
if (this.data) {
this.label.text = this.data.label;
this.label.textColor = this.data.color;
}
}
}
