组件 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
