跳到主要内容

eui.Component

包    eui

类    public class Component

继承    eui.Component → egret.DisplayObjectContainer → egret.DisplayObject → egret.EventDispatcher → egret.HashObject

子类    eui.Button,eui.ItemRenderer,eui.Panel,eui.Rect,eui.Scroller,eui.TextInput,eui.Range,eui.ScrollBarBase

Component 类定义可设置外观的组件的基类。Component 类所使用的外观通常是 Skin 类的子类。通过设置 component 类的 skinName 属性，将 skin 类与 component 类相关联。

公共属性​

属性
bottom : any
距父级容器底部距离
currentState : string
组件的当前视图状态
enabled : boolean
组件是否可以接受用户交互
explicitHeight : number
外部显式指定的高度
explicitWidth : number
外部显式指定的宽度
horizontalCenter : any
在父级容器中距水平中心位置的距离
hostComponentKey : string
主机组件标识符
includeInLayout : boolean
指定此组件是否包含在父容器的布局中
left : any
距父级容器离左边距离
maxHeight : number
组件的最大高度,同时影响测量和自动布局的尺寸
maxWidth : number
组件的最大高度
minHeight : number
组件的最小高度,此属性设置为大于maxHeight的值时无效
minWidth : number
组件的最小宽度,此属性设置为大于maxWidth的值时无效
percentHeight : number
相对父级容器高度的百分比
percentWidth : number
相对父级容器宽度的百分比
right : any
距父级容器右边距离
skin : eui.Skin
皮肤对象实例
skinName : any
皮肤标识符
top : any
距父级容器顶部距离
verticalCenter : any
在父级容器中距竖直中心位置的距离

公共方法​

方法
Component()
构造函数
getLayoutBounds(bounds:egret.Rectangle):void
组件的布局尺寸,常用于父级的updateDisplayList()方法中
getPreferredBounds(bounds:egret.Rectangle):void
获取组件的首选尺寸,常用于父级的measure()方法中
invalidateDisplayList():void
标记需要验证显示列表，以便在稍后屏幕更新期间调用该组件的 updateDisplayList() 方法
invalidateProperties():void
标记提交过需要延迟应用的属性，以便在稍后屏幕更新期间调用该组件的 commitProperties() 方法
invalidateSize():void
标记提交过需要验证组件尺寸，以便在稍后屏幕更新期间调用该组件的 measure() 方法
invalidateState():void
标记组件当前的视图状态失效，调用此方法后，子类应该覆盖 getCurrentState() 方法来返回当前的视图状态名称
setLayoutBoundsPosition(x:number,y:number):void
设置元素在屏幕上进行绘制时所用的布局坐标
setLayoutBoundsSize(layoutWidth:number,layoutHeight:number):void
设置元素的布局大小
setMeasuredSize(width:number,height:number):void
设置测量结果
setSkinPart(partName:string,instance:any):void
关联一个对象到逻辑组件的指定皮肤部件上
validateDisplayList():void
验证子项的位置和大小，并绘制其他可视内容
validateNow():void
验证并更新此对象的属性和布局，如果需要的话重绘对象
validateProperties():void
由布局逻辑用于通过调用 commitProperties() 方法来验证组件的属性
validateSize(recursive:boolean):void
验证组件的尺寸

事件​

Events
egret.Event.COMPLETE
当设置skinName为外部exml文件路径时，加载并完成EXML解析后调度。
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 实例上抬起接触点时（例如，按住屏幕上的某个对象,然后从它上面挪开后再松开手指）调度。

属性详细信息​

bottom​

bottom : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

距父级容器底部距离。

currentState​

currentState : string

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件的当前视图状态。显式设置此属性，将采用显式设置的值去更新皮肤状态，而忽略组件内部 getCurrentState() 方法返回的值。将其设置为 "" 或 null 可将取消组件外部显式设置的视图状态名称，从而采用内部 getCurrentState() 方法返回的状态。

enabled​

enabled : boolean = true

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件是否可以接受用户交互。将 enabled 属性设置为 false 后，组件会自动禁用触摸事件(将 touchEnabled 和 touchChildren 同时设置为 false)，部分组件可能还会将皮肤的视图状态设置为"disabled",使其所有子项的颜色变暗。

explicitHeight​

explicitHeight : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

外部显式指定的高度。

explicitWidth​

explicitWidth : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

外部显式指定的宽度。

horizontalCenter​

horizontalCenter : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

在父级容器中距水平中心位置的距离。

hostComponentKey​

hostComponentKey : string = null

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

主机组件标识符。用于唯一确定一个组件的名称。通常用于在主题中查询默认皮肤名。

includeInLayout​

includeInLayout : boolean = true

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

指定此组件是否包含在父容器的布局中。若为false，则父级容器在测量和布局阶段都忽略此组件。注意，visible属性与此属性不同，设置visible为false，父级容器仍会对其布局。

left​

left : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

距父级容器离左边距离。

maxHeight​

maxHeight : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件的最大高度,同时影响测量和自动布局的尺寸。

maxWidth​

maxWidth : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件的最大高度。同时影响测量和自动布局的尺寸。

minHeight​

minHeight : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件的最小高度,此属性设置为大于maxHeight的值时无效。同时影响测量和自动布局的尺寸。

minWidth​

minWidth : number

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

组件的最小宽度,此属性设置为大于maxWidth的值时无效。同时影响测量和自动布局的尺寸。

percentHeight​

percentHeight : number = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

相对父级容器高度的百分比。

percentWidth​

percentWidth : number = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

相对父级容器宽度的百分比。

right : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

距父级容器右边距离。

skin​

skin : eui.Skin

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

皮肤对象实例。

skinName​

skinName : any

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

皮肤标识符。有效值可为：皮肤类定义,皮肤类名,皮肤实例,EXML文件内容,或外部EXML文件路径，

top​

top : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

距父级容器顶部距离。

verticalCenter​

verticalCenter : any = NaN

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

在父级容器中距竖直中心位置的距离。

方法详细信息​

Component()​

public Component()

构造函数。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

getLayoutBounds()​

public getLayoutBounds(bounds:egret.Rectangle):void

组件的布局尺寸,常用于父级的updateDisplayList()方法中。按照：布局尺寸>外部显式设置尺寸>测量尺寸 的优先级顺序返回尺寸。注意此方法返回值已经包含scale和rotation。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数

getPreferredBounds()​

public getPreferredBounds(bounds:egret.Rectangle):void

获取组件的首选尺寸,常用于父级的measure()方法中。按照：外部显式设置尺寸>测量尺寸 的优先级顺序返回尺寸。注意此方法返回值已经包含scale和rotation。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数

invalidateDisplayList()​

public invalidateDisplayList():void

标记需要验证显示列表，以便在稍后屏幕更新期间调用该组件的 updateDisplayList() 方法。Invalidation 是一个很有用的机制，可将组件更改延迟到稍后屏幕更新时进行处理，从而消除了重复的工作。例如，要更改宽度和高度，如果在更改宽度后立即更新组件，然后在设置新高度后再次更新组件，就有些浪费。更改两个属性后再使用新的大小一次性呈示组件，效率会更高。很少调用 Invalidation 方法。通常，在组件上设置属性会自动调用合适的 invalidation 方法。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

invalidateProperties()​

public invalidateProperties():void

标记提交过需要延迟应用的属性，以便在稍后屏幕更新期间调用该组件的 commitProperties() 方法。这是一个很有用的机制，可将组件更改延迟到稍后屏幕更新时进行处理，从而消除了重复的工作。例如，要更改文本颜色和大小，如果在更改颜色后立即进行更新，然后在设置大小后再更新大小，就有些浪费。同时更改两个属性后再使用新的大小和颜色一次性呈示文本，效率会更高。很少调用 Invalidation 方法。通常，在组件上设置属性会自动调用合适的 invalidation 方法。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

invalidateSize()​

public invalidateSize():void

标记提交过需要验证组件尺寸，以便在稍后屏幕更新期间调用该组件的 measure() 方法。Invalidation 是一个很有用的机制，可将组件更改延迟到稍后屏幕更新时进行处理，从而消除了重复的工作。例如，要更改文本和字体大小，如果在更改文本后立即进行更新，然后在设置大小后再更新大小，就有些浪费。更改两个属性后再使用新的大小一次性呈示文本，效率会更高。很少调用 Invalidation 方法。通常，在组件上设置属性会自动调用合适的 invalidation 方法。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

invalidateState()​

public invalidateState():void

标记组件当前的视图状态失效，调用此方法后，子类应该覆盖 getCurrentState() 方法来返回当前的视图状态名称。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

setLayoutBoundsPosition()​

public setLayoutBoundsPosition(x:number,y:number):void

设置元素在屏幕上进行绘制时所用的布局坐标。请注意，调用 setLayoutBoundSize() 方法会影响布局位置，因此请在调用 setLayoutBoundSize()之后再调用 setLayoutBoundPosition()。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数
    • x:number - 边框左上角的 X 坐标。
    • y:number - 边框左上角的 Y 坐标。

setLayoutBoundsSize()​

public setLayoutBoundsSize(layoutWidth:number,layoutHeight:number):void

设置元素的布局大小。这是元素在屏幕上进行绘制时所用的大小。如果 width 和/或 height 参数尚未指定 (NaN))，则 EUI 会将该元素的布局大小设置为首选宽度和/或首选高度。请注意，调用 setLayoutBoundSize() 方法会影响布局位置，因此请在调用 setLayoutBoundSize()之后再调用 setLayoutBoundPosition()。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数
    • layoutWidth:number - 元素的布局宽度。
    • layoutHeight:number - 元素的布局高度。

setMeasuredSize()​

public setMeasuredSize(width:number,height:number):void

设置测量结果。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数

setSkinPart()​

public setSkinPart(partName:string,instance:any):void

关联一个对象到逻辑组件的指定皮肤部件上。通常您不需要手动调用此方法，当使用EXML文件作为组件皮肤，此方法将会被自动调用。在运行时，EXML文件内声明的id名称将作为此方法的partName参数，而id所对应的节点对象，将作为此方法的instance参数被依次传入。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数
    • partName:string - 皮肤部件名称
    • instance:any - 皮肤部件实例

validateDisplayList()​

public validateDisplayList():void

验证子项的位置和大小，并绘制其他可视内容。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

validateNow()​

public validateNow():void

验证并更新此对象的属性和布局，如果需要的话重绘对象。通常只有当脚本执行完毕后，才会处理要求进行大量计算的处理属性。例如，对 width 属性的设置可能会延迟，因为此设置需要重新计算这些对象的子项或父项的宽度。如果脚本多次设置了 width 属性，则延迟处理可防止进行多次处理。此方法允许您手动覆盖此行为。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

validateProperties()​

public validateProperties():void

由布局逻辑用于通过调用 commitProperties() 方法来验证组件的属性。通常，子类应覆盖 commitProperties() 方法，而不是覆盖此方法。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native

validateSize()​

public validateSize(recursive:boolean):void

验证组件的尺寸。

  • 支持版本:eui 1.0
  • 运行平台:Web,Native
  • 参数
    • recursive:boolean - 如果为 true，则调用对象子项的此方法。

示例​

**

* 通常 eui.Component 可以作为简单布局的容器。

*/

class  ComponentExample  extends  egret.Sprite  {

public  constructor()  {

super();

var shape =  new  egret.Shape();

shape.graphics.beginFill(0x666666)

shape.graphics.drawRect(0,0,400,300);

shape.graphics.endFill();

this.addChild(shape);

var exml =

`<e:Skin xmlns:e="http:/ns.egret.com/eui">

<e:Label text="标题" horizontalCenter="0"/>

<e:Label text="egret" right="0" bottom="0"/>

</e:Skin>`;

var component =  new  eui.Component();

component.width  =  400;

component.height  =  300;

component.skinName  = exml;

this.addChild(component);

}

}