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;//设置标签字体为20pxlabel_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 按钮相关推荐

【鸿蒙 HarmonyOS】UI 组件 ( Button 组件 )
文章目录一.布局文件中设置 Button 组件属性二.代码中修改 Button 组件属性三.Button 点击事件四.完整代码示例五.执行结果六.GitHub 地址一.布局文件中设置 B ...
Bootstrap 组件 Button 按钮
按钮使用Bootstrap 的自定义按钮样式对于一些行动在表单中,对话框,和更多支持的多种大小.状态还有更多. 例子 Bootstrap包含几个预定义的按钮样式,每个样式都有自己的语义目的,还添加 ...
【微信小程序自学第一天】主要内容是text插件以及button按钮插件以及image图像插件
前言作为大一萌新挑战自学微信小程序,在备战蓝桥杯的同时学一点类似服务外包竞赛的内容,本人在上大一之前没有接触过任何编程,还希望各位大佬多多指教! 正文常用的基础内容组件 text 文本组件类似于 ...
React UI 组件库 Chakra UI - 05 案例实践
案例实践使用 create-react-app 新建项目. 表单使用 Chakra UI 实现下图的表单: 构建注册表单 react-icons 是一个 React 流行图标库. // compo ...
【Unity】UI交互组件之按钮Button可选基类总结
按钮(Button) 按钮控件可以响应于用户的点击并触发启动或确认操作,比如Web表单上的Submit及Cancel按钮.主要有三大属性:Interactable / Transition / Nav ...
Android开发8：UI组件TextView,EditText,Button
版本:Android4.3 API18 学习整理:liuxinming TextView 概述 TextView直接继承了View(EditText.Button两个UI组件类的父类) TextVie ...
【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
所谓UI组件库,就是封装了平常项目开发中经常会使用的页面组件,发布至npm库中作为插件供项目组成员及其他开发者使用(不发布也行),目的就是为了避免多次重复劳动. 以插件的形式使用可以做到即插即用,非常 ...
UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
使用Python中的Button组件制作按钮
使用Python中的Button组件制作按钮本篇文章小编给大家分享如何在Python中使用Button组件制作按钮. 生活中我们会遇到各种各样的登录界面,比如在登陆QQ时将账号和密码输入完备后,需要 ...
Python中Button按钮组件常用的属性及参数设置
Python中Button按钮组件常用的属性及参数设置本篇文章中小编给大家介绍Button按钮组件的相关常用的属性以及参数的设置. 一. 常用属性使用语法变量=Button(父容器(根窗口),参数 ...

LayaAir UI 组件 # Button 按钮