LayaAir UI 组件 # Button 按钮

电玩女神 2022-04-02 09:55 845阅读 0赞

**目录**

Button 组件详解

默认Button资源

自定义按钮资源

按钮绑定单击事件

Button组件属性介绍

--------------------

本文使用 LayaAir IDE 2.0.0beta5 版本。

# Button 组件详解 #

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

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

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

<table> 
 <tbody> 
  <tr> 
   <th colspan="1">Method（方法）</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Button#Button%28%29" rel="nofollow">Button</a>(skin:String = null, label:String)&nbsp; &nbsp;，创建一个新的 Button 类实例。</p> </td> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.Button#destroy%28%29" rel="nofollow">destroy</a>(destroyChild:Boolean = true):void</p> <p>[override] 销毁此对象。destroy对象默认会把自己从父节点移除，并且清理自身引用关系，等待js自动垃圾回收机制回收。destroy后不能再使用。 destroy时会移除自身的事情监听，自身的timer监听，移除子对象及从父节点移除自己。</p> </td> 
  </tr> 
 </tbody> 
</table>

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

## 默认Button资源 ##

![20181226120034207.gif][]

1、LayaAir [默认已经提供了一些控件][Link 1]，其中就包含 Button(按钮)组件，如上图所示。项目创建好之后，这些系统组件默认已经进行图集打包到了 comp.atlas 中，它的使用其实类似《[LayaAir 图集动画2—动画运用][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添加到舞台上
    }

![20181226134516256.gif][]

## 自定义按钮资源 ##

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

![20181226135234226.gif][]

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;
    }

![2018122614375679.gif][]

## 按钮绑定单击事件 ##

//初始化引擎，设置宽高并开启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);//添加到舞台
    }

![20181226145956781.gif][]

# Button组件属性介绍 #

![20181226144147255.png][]

**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][https_ldc.layabox.com_doc_nav_zh-js-2-3-1]

[https_layaair.ldc.layabox.com_api_category_UI_class_laya.ui.Button]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Button
[20181226120034207.gif]: /images/20220402/d1d6aad7a5a24bd3b4b35dd3cb1890a6.png
[Link 1]: https://ldc.layabox.com/doc/?nav=zh-js-2-1-6
[LayaAir _2]: https://blog.csdn.net/wangmx1993328/article/details/85037903
[20181226134516256.gif]: /images/20220402/1ec2b8a1d3aa447681f874fd3244b30f.png
[20181226135234226.gif]: /images/20220402/95430889bbed4b9bb6c8ce3231001e26.png
[stateNum]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Button#stateNum
[skin]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Button#skin
[2018122614375679.gif]: /images/20220402/be342533ea2043d98fbedcadada36353.png
[20181226145956781.gif]: /images/20220402/e1a2afc7bfeb4385bbae401a1e795947.png
[20181226144147255.png]: /images/20220402/f342cf577c77462cbe4a37b551715530.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-1]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-1