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
Laya Component相关推荐
- laya2.0 微信好友对战
PaoYa.Component 继承自 laya.component 对socket命令做了封装,以及页面跳转的处理,是通过脚本加入到页面上的. import GameService from &q ...
- Laya Script
Laya2.0 IDE采用挂载组件脚本与场景管理的方式进行开发,在IDE中编辑场景和页面组件,通过添加脚本的方式,使项目开发更利于程序.美术.策划的协同工作,并对初次接触Laya的开发者更易于上手且开 ...
- Laya开发入门解析
一.laya项目目录结构 1:.laya 存放项目开发中运行中的一些配置消息 2: bin 存放当前项目的输出文件 3: laya 资源项目目录 子文件夹 assets 存放项目的资源 子文件夹 pa ...
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
- Android Intent的 Component 使用
Intent 组成元素的列表说明 元素名称 设置方法 说明与用途 Component setComponent 组件,用于指定Intent的来源与目的 Action set ...
- 微信小程序自定义组件Component的简单使用
首先为什么要使用component 这里列举2个例子, 1 如果项目中多个地方使用同一个弹框, 2 两个同事合作写一个界面, 这2中情况使用组件是比较好的选择 开始吧 第一步首先创建一个包用于存放组件 ...
- PCA（Principal Component Analysis）的原理、算法步骤和实现。
PCA的原理介绍: PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分 ...
- 机器学习与高维信息检索 - Note 7 - 核主成分分析（Kernel Principal Component Analysis，K-PCA）
Note 7 - 核主成分分析(Kernel Principal Component Analysis) 核主成分分析 Note 7 - 核主成分分析(Kernel Principal Compone ...
- 机器学习与高维信息检索 - Note 4 - 主成分分析及其现代解释（Principal Component Analysis, PCA）及相关实例
主成分分析及其现代解释 4. 主成分分析及其现代解释 Principal Component Analysis and Its Modern Interpretations 4.1 几何学解释 The ...
最新文章
- getprivateprofilestring读不到数据_从零到千万用户，我是如何一步步优化MySQL数据库的？...
- CVPR 2017 CA:《Context-Aware Correlation Filter Tracking》论文笔记
- 在数字图像处理中特征点是什么
- 算法python知乎_20个算法李小文知乎文章与Github代码汇总
- 【CSS3】制作带光晕的网页“Button“
- python接口自动化测试(五)-其它(认证代理超时配置)
- 时间序列-Auto-ARIMA模型
- mysql5.6.10开启二进制日志_mysql二进制日志的开启和使用
- MyBatis入门到精通，最全最详细的MyBatis学习教程来了
- 360手机助手关于签名校验的分析
- OSI常用网络协议（七层）
- C#中的线程池使用方法
- AppleScript(0) : 文档与语法
- 【毕设基础教学】OLED屏幕使用详解 - 单片机 物联网
- 支付宝app支付产品不通过app集成sdk发起支付（附源码）
- 线性回归；欠拟合和过拟合
- R可视化07|ggplot2图层-标度图层（scale layer）-颜色盘篇
- Portainer添加远程Docker（Docker API）
- unity3D 中各英文翻译
- 使用 Vue 脚手架