本文使用 LayaAir IDE 2.0.0beta5 版本。

Button 组件详解

1、laya.ui.Button（按钮）组件是最常用的组件之一，可以显示文本标签、图标或者两者同时显示。

2、LayaAir IDE 资源面板中以 btn_ 或者 button_ 命令开头的组件自动识别为按钮图片组件(皮肤)。

Property（属性）
clickHandler : Handler ，对象的点击事件处理器函数（无默认参数）。
height : Number ，[override] 表示显示对象的高度，以像素为单位。注：当值为0时，高度为自适应大小。
label : String ，按钮的文本内容。
labelAlign : String ，标签对齐模式，默认为居中对齐。
labelBold : Boolean ，表示按钮文本标签是否为粗体字。
labelColors : String ，表示按钮各个状态下的文本颜色。格式: "upColor,overColor,downColor,disableColor"。
labelFont : String ，表示按钮文本标签的字体名称，以字符串形式表示。
labelSize : int ，表示按钮文本标签的字体大小。
selected : Boolean ，表示按钮的选中状态。如果值为true，表示该对象处于选中状态。否则该对象处于未选中状态。（*默认为false*）
skin : String，对象的皮肤资源地址。支持单态，两态和三态，用 stateNum 属性设置对象的皮肤地址，以字符串表示。
stateNum : int 指定对象的状态值，以数字表示。默认值为3。此值决定皮肤资源图片的切割方式。取值： 1：单态。图片不做切割，按钮的皮肤状态只有一种。 2：两态。图片将以竖直方向被等比切割为2部分，从上向下，依次为弹起状态皮肤、按下和经过及选中状态皮肤。 3：三态。图片将以竖直方向被等比切割为3部分，从上向下，依次为弹起状态皮肤、经过状态皮肤、按下和选中状态皮肤
strokeColors : String ，表示按钮各个状态下的描边颜色。格式: "upColor,overColor,downColor,disableColor"。
width : Number ，[override] 表示显示对象的宽度，以像素为单位。注：当值为0时，宽度为自适应大小。

Method（方法）
Button(skin:String = null, label:String) ，创建一个新的 Button 类实例。
destroy(destroyChild:Boolean = true):void [override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。

Method（方法）

Button(skin:String = null, label:String) ，创建一个新的 Button 类实例。

destroy(destroyChild:Boolean = true):void

[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。

更多 Button API 可以参考官网：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Button

默认Button资源

1、LayaAir 默认已经提供了一些控件，其中就包含 Button(按钮)组件，如上图所示。项目创建好之后，这些系统组件默认已经进行图集打包到了 comp.atlas 中，它的使用其实类似《LayaAir 图集动画2—动画运用》。

2、现在就以默认提供的 Button 组件为例进行说明。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1820,Laya.WebGL);

//atlas_comp：打包好的图集资源路径，./ 表示当前路径也就是项目输出路径 bin 目录，"./"" 可写可不写
//skin_button：button按钮的路径。这里注意：因为 button 组件被打包在了图集 comp.atlas 中,所以组件的路径接着图集的路径写
var atlas_comp = "./res/atlas/comp.atlas";//也可以直接是 res/atlas/comp.atlas
var skin_button = "comp/button.png";//comp是图集的名称，button.png是图集中组件的全名

//加载资源成功后，执行 onLoaded 回调方法
Laya.loader.load(atlas_comp,Laya.Handler.create(this,onLoaded));

function onLoaded(){
    var btn = new Laya.Button(skin_button);//创建一个 Button 实例
    btn.label = "登 录";//按钮上显示的文本内容
    btn.labelSize = 20;//按钮文本标签的字体大小
    btn.width = 100;//设置按钮的宽度
    btn.height = 50;//设置按钮的高度
    btn.pos(30,10);//按钮显示的位置

    Laya.stage.addChild(btn);//将Button添加到舞台上
}

自定义按钮资源

1、如果不想使用系统提供的默认组件，则可以自己 PS 一个图片按钮，因为官方给的也无非就是一张图片。

2、系统默认提供 button.png 分辨率为 75 * 69 ，等分为三份，现在 PS 了一张尺寸一样的 btn_myself.png，同样等分为三份，为了演示效果更加明显，使用了三种不同的颜色。

3、按钮图片的尺寸没有强制要求,因为通过上一个例子已经知道，实际显示的大小是可以通过代码指定的，不过建议不要太大。

4、stateNum 属性描述按钮对象的3种状态，分别为：鼠标放到按钮上、鼠标按下、鼠标松开，它会分别对应 skin (皮肤)中从上往下的三个部分。下面直接通过例子演示更加直观。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1820, Laya.WebGL);

//skin_button：button按钮的路径,必须是 bin 目录下
var skin_button = "ui/btn_myself.png";
var label_show ;//标签组件实例
var btn;//按钮组件实例

//加载资源成功后，执行 onLoaded 回调方法
Laya.loader.load(skin_button, Laya.Handler.create(this, onLoaded));
function onLoaded() {
    btn = new Laya.Button(skin_button);//创建一个 Button 实例
    btn.label = "登 录";//按钮上显示的文本内容
    btn.labelSize = 20;//按钮文本标签的字体大小
    btn.width = 100;//设置按钮的宽度
    btn.height = 50;//设置按钮的高度
    btn.pos(30, 10);//按钮显示的位置
    Laya.stage.addChild(btn);//将Button添加到舞台上

    showLabel();
}

//显示一个标签——用于单击改变 button 的 stateNum
function showLabel(){
    label_show = new Laya.Label();
    label_show.text = "stateNum=3";
    label_show.fontSize = 20;
    label_show.color = "#fff";
    label_show.pos(200,20);
    Laya.stage.addChild(label_show);
    label_show.on(Laya.Event.CLICK,this,label_click);
}

//标签被点击后执行函数
var count = 1;
function label_click(){
    console.log(1);
    label_show.text = "stateNum="+count;
    btn.stateNum = count++;
    count = count>3?1:count;
}

按钮绑定单击事件

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(1080, 1820, Laya.WebGL);

//skin_button：button按钮的路径,必须是 bin 目录下
var skin_button = "ui/btn_myself.png";
var label_show ;//标签组件实例
var btn;//按钮组件实例

//加载资源成功后，执行 onLoaded 回调方法
Laya.loader.load(skin_button, Laya.Handler.create(this, onLoaded));
function onLoaded() {
    btn = new Laya.Button(skin_button);//创建一个 Button 实例
    btn.label = "登 录";//按钮上显示的文本内容
    btn.labelSize = 20;//按钮文本标签的字体大小
    btn.width = 100;//设置按钮的宽度
    btn.height = 50;//设置按钮的高度
    btn.pos(30, 10);//按钮显示的位置
    Laya.stage.addChild(btn);//将Button添加到舞台上

    btn.on(Laya.Event.CLICK,this,btn_click);//为按钮绑定单击事件
    showLabel();
}

//点击按钮后执行函数
let count =1;
function btn_click(){
    label_show.text = "单击 "+(count++)+" 次";
}

//显示一个标签
function showLabel(){
    label_show = new Laya.Label();//创建标签对象
    label_show.fontSize = 20;//设置标签字体为20px
    label_show.color = "#fff";//字体颜色白色
    label_show.pos(200,20);//标签显示位置
    Laya.stage.addChild(label_show);//添加到舞台
}

Button组件属性介绍

1）skin

1、按钮的 skin（皮肤）因切割方式不同，分成三态，两态、单态，这里的态指的是按钮皮肤（skin）的状态。

2、三态是将皮肤图片按竖直方向以等比分割的形式分为3部分，从上至下依次为弹起或离开状态皮肤、经过状态皮肤、按下和选中（保持按下）状态皮肤，三态常用于 PC 浏览器中。

3、移动设备上，通常只采用两态（因为移动设备没有悬停的过程），图片以竖直方向被等比切割为两部分，上面的部分为弹起或离开状态状态皮肤，下面的部分为经过和按下以及选中状态（保持按下）皮肤。

4、单态按钮不切割图片，无论什么状态，按钮的皮肤只有一种，保持不变。

2）stateNum

1、stateNum 属性值决定皮肤资源图片的切割方式，默认值为3，等比分割为3部分。如果是两态按钮，需要将 stateNum的属性值设为2，等比切割为2部分。单态按钮设置为1，不进行切割。

2、需要注意的是，指定按钮状态（stateNum ），需要与指定的按钮皮肤(skin)对应好，如三态的按钮皮肤，stateNum 设置为2时，显然会错位，上面示例中也可以看出来。

3）selected

1、selected 属性默认为未选中（ false ）状态，如果将 selected 属性设置为true，则按钮将会一直保持选中（持续按下）的状态，而不会再对其它状态产生变化（除非代码中进行状态改变）。

更多内容可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-1

LayaAir UI 组件 # Button 按钮

Button 组件详解

默认Button资源

自定义按钮资源

按钮绑定单击事件

Button组件属性介绍

猜你喜欢