Laya Component

组件 Component

LayaAir自带的组件类都位于laya.ui包中，所有的组件直接或间接地继承自Component类，Component类是UI组件的基类。每个组件都拥有属于自己的属性、方法和事件。使用组件可以使程序设计与界面设计分离，以提高代码的可复用性。

项目	描述	值
Package	包	laya.ui
Class	类	Laya.Component
Inheritance	继承	Component / Sprite / Node /EventDispatcher / Object
Implement	实现	IComponent
SubClass	子类	Box、Button、Clip、ColorPicker、ComboBox、Image、Label、ProgressBar、ScrollBar、Slider、TipManager

组件的生命周期：

Component的生命周期是从预初始化（preinitialize ）开始，然后创建子级（createChildren ），接着进行初始化（initialize ），最后进入组件构造函数。

关于界面组件化

在团队协作过程中采用IDE生成UI代码的方法是非常容易产生代码冲突的，而且这种冲突往往难以解决。当两个人同时修改同一个UI文件，通过IDE生成的代码稍微移动某个空间代码可能会改动许多处。另外UI代码非常冗长。为了减少代码的冲突，更好地整理逻辑代码，以减少bug的产生。组件化的代码逻辑会更加清晰且有利于修复bug。

组件化首先需要在设计层面将界面组件化，设计上需要提前思考前端如何组建下，一般会按照界面上完成相同功能的组件放到同一个组件UI中。例如棋牌游戏开发中，玩家都具有共同展示任务相关的模块，包括头像、金钱、胜率等，可能同一个房间内有多个玩家，那么就可以直接将展示玩家信息的控件进行组件化。

具体实现上会采用一个UI类去继承对应的UI，对应继承的类的this指针可以直接获取到父类的所有控件信息。例如，UI中有一个Game类，Game类继承了最底层的UI即整个游戏的画布。所有的组件都依赖于game.ui。通过将Game添加到Stage舞台中，其他的UI添加到Game中来显示。同时布局都是在game.ui添加空白的Sprite精灵，再将对应的组件实例化后addChild到对应的Sprite中。对于Game类，可以通过this.getChildByName来获取对应的精灵Sprite，通过管理Sprite精灵就可以直接设置对应控件的位置。对于其他具体的组件，一般还需要考虑对应的动画逻辑。创建对应的类来继承UI。一般情况下会将组件上所有的控件在类中使用属性保存，然后通过getChildByName来赋值。

继承 Sprite

Sprite精灵类作为LayaAir引擎中最基本的显示对象容器类，Component组件类继承自Sprite类，并新增了组件通用的属性、方法和接口，规定了组件的生命周期等扩展功能。

项目	描述	值
Package	包	laya.display
Class	类	public class Sprite
Inheritance	继承	Sprite / Node / EventDispatcher / Object
Implement	实现	laya.display.ILayout
SubClass	子类	AnimationPlayerBase、Component、DialogManager、GridSprite、MapLayer、MovieClip、Particle2D、Scene、Skeleton、Stage、Text、TileAniSprite、Video

LayaAir引擎的API设计的精简巧妙，核心显示类只有一个Sprite，Sprite会针对不同情况做渲染优化，所以保证一个类实现丰富功能的同时又能达到较高性能。

Sprite是基本的显示图形的显示列表节点，默认没有宽高且不接受鼠标事件。

Sprite默认没有宽高，但可通过getBounds()函数获取，也可以手工设置宽高。可以通过设置autoSize = true后再获取宽高。Sprite的宽高一般用于进行碰撞检测和排版，并不影响显示图像大小，如果需要更改显示图像的大小，可以通过scale、scaleX、scaleY缩放来实现。

Sprite默认不接受鼠标事件，即mouseEnabled = false，只要对其监听任意鼠标事件均会自动打开自己以及所有父对象的mouseEnabled = true。所以一般无需手工设置mouseEnabled属性。

Sprite同时也是容器类，可以用来添加多个子节点。

属性

属性	描述
anchorX:Number	X轴锚点 值为0~1
anchorY:Number	Y轴锚点 值为0~1
centerX:Number	对象水平中轴线与父容器水平中心线的像素距离
centerY:Number	对象垂直中轴线与父容器垂直中心线的像素距离
scaleX:Number	X轴缩放值，默认为1。设置为负数可实现水平反转。
scaleY:Number	Y轴缩放值，默认为1。设置为负数可实现垂直反转。
height:Number	显示对象的像素高度
width:Number	显示对象的像素宽度
displayHeight:Number	对象显示像素高度
displayWidth:Number	对象显示像素宽度
bottom:Number	组件底部到内容区域底边之间垂直像素间距
top:Number	从组件顶边到内容区域顶部之间的垂直像素距离
left:Number	从组件左边到内容区域左边之间的水平像素间距
right:Number	从组件右边到内容区域右边之间的水平像素间距
layoutEnabled:Boolean=true	是否启用相对布局
tag:*	对象的标签
toolTip:*	鼠标悬停提示
comXml:Object	XML数据
dataSource:*	数据赋值，通过对UI赋值来控制UI显示逻辑。
disabled:Boolean	是否禁用页面
gray:Boolean	是否变灰

例如：自定义层组件

//层
class Layer{
    //场景层
    public static SCENE_LAYER:laya.ui.Component;
    //特效层
    public static EFFECT_LAYER:laya.ui.Component;
    //遮罩层，触发关闭界面操作
    public static WINDOW_LAYER:laya.ui.Component;
    //动画层
    public static TOP_LAYER:laya.ui.Component;
    //构造器
    constructor(){
        //初始化场景层
        Layer.SCENE_LAYER = new laya.ui.Component();
        Layer.SCENE_LAYER.width = Laya.stage.width;
        Layer.SCENE_LAYER.height = Laya.stage.height;
        // Layer.SCENE_LAYER.mouseEnabled = false;
        Laya.stage.addChild(Layer.SCENE_LAYER);
        //初始化特效层
        Layer.EFFECT_LAYER = new laya.ui.Component();
        Layer.EFFECT_LAYER.width = Laya.stage.width;
        Layer.EFFECT_LAYER.height = Laya.stage.height;
        Layer.EFFECT_LAYER.mouseEnabled = false;
        Laya.stage.addChild(Layer.EFFECT_LAYER);
        //初始化遮罩层
        Layer.WINDOW_LAYER = new laya.ui.Component();
        Layer.WINDOW_LAYER.width = Laya.stage.width;
        Layer.WINDOW_LAYER.height = Laya.stage.height;
        Layer.WINDOW_LAYER.mouseEnabled = false;
        Laya.stage.addChild(Layer.WINDOW_LAYER);
        //初始化动画层
        Layer.TOP_LAYER = new laya.ui.Component();
        Layer.TOP_LAYER.width = Laya.stage.width;
        Layer.TOP_LAYER.height = Laya.stage.height;
        Layer.TOP_LAYER.mouseEnabled = false;
        Laya.stage.addChild(Layer.TOP_LAYER);
    }
}

分类

根据组件自身的结构和功能，可以将laya.ui包下的组件分为三大类，分别是基础组件、容器组件、视图组件。

组件分类

基础组件

基础组件是页面编辑中最常用的组件，通过资源管理器或组件库拖拽至场景编辑器中进行可视化操作，可以在属性设置器重设置属性值，然后在场景编辑器中直接查看显示效果。

基础组件包括：

Label
TextInput
TextArea
Button
Image
CheckBox
Radio
Clip
ProgressBar
Slider
HSlider
VSlider
ScrollBar
HScrollBar
VScrollBar
ComboBox

容器组件

容器组件是由一个或多个基础组件通过转化为容器的方式而来，在LayaAir IDE中可以通过Ctrl+B快捷键将一个基础组件转换为容器组件。

容器组件包括

Box
List
Tab
RadioGroup
ViewStack
Panel
HBox
VBox
Tree
Sprite

视图组件

视图组件是页面级显示对象容器，在LayaAir IDE的UI系统中，页面是用来承载显示所有组件的。

视图组件包括

View
Dialog