目录
CheckBox 组件
| Package | laya.ui |
| 类 | public class CheckBox |
| Inheritance | CheckBox  Button Component Sprite Node EventDispatcher Object |
1、CheckBox 组件显示一个小方框，该方框内可以有选中标记，CheckBox 组件还可以显示可选的文本标签，默认该标签位于 CheckBox 右侧。
2、CheckBox 使用 dataSource 赋值时的的默认属性是：selected。
3、CheckBox 继承自 Button，所以使用起来基本与 《LayaAir UI 组件 # Button》无异。
| Property（属性） |
|---|
| dataSource : * ，[override] 数据赋值，通过对UI赋值来控制UI显示逻辑。 简单赋值会更改组件的默认属性，使用大括号可以指定组件的任意属性进行赋值。 |
| Method | |
|---|---|
| CheckBox(skin:String = null, label:String) ，创建一个新的 CheckBox 组件实例。skin:String (default = null) — 皮肤资源地址。label:String — 文本标签的内容。 |
|
默认checkbox 资源
1、CheckBox 组件的选择框图片是 CheckBox 组件的皮肤（skin），图片资源命名通常是 check、checkbox或以check_为前缀。
2、CheckBox 组件资源通常是由三态或两态的 skin 图片组成，最上面第一个小框为未选中状态，中间的小框为鼠标悬停的状态，底部小框为选中时状态。
3、使用方式与《LayaAir UI 组件 # Button》雷同。
//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
//资源路径-复选框皮肤路径，这里使用系统提供的comp图集中的checkbox.png
var skin_checkbox = "comp/checkbox.png";
//加载系统默认的图集资源，加载成功后执行onLoad回调方法
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, onLoaded));
function onLoaded() {
//创建第1个复选框
var checkbox_1 = add_checkbox("Java");
checkbox_1.pos(30, 10);//设置checkbox的坐标位置
//创建第2个复选框
var checkbox_2 = add_checkbox("Android");
checkbox_2.selected = true;//设置为默认选中状态
checkbox_2.pos(30, 50);//设置checkbox的坐标位置
//创建第3个复选框
var checkbox_3 = add_checkbox("LayaBox");
checkbox_3.pos(30, 90);//设置checkbox的坐标位置
}
//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText){
var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例
checkbox.label = labelText;//设置文本标签内容
checkbox.labelSize = 20;//label文本字体大小
Laya.stage.addChild(checkbox);//添加到舞台上显示
return checkbox;
}
自定义组件皮肤
1、操作与《LayaAir UI 组件 # Button》中的 自定义按钮资源 基本一致。
2、自己 PS 一张复选框的皮肤图片，尺寸没有强制要求，建议小尺寸，且等分。
//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
//资源路径-复选框皮肤路径，使用自定义皮肤,bin 目录下
var skin_checkbox = "ui/checkbox_myself.png";
//加载皮肤成功后执行onLoad回调方法
Laya.loader.load(skin_checkbox, Laya.Handler.create(this, onLoaded));
function onLoaded() {
//创建第1个复选框
var checkbox_1 = add_checkbox("Java");
checkbox_1.pos(30, 10);//设置checkbox的坐标位置
//创建第2个复选框
var checkbox_2 = add_checkbox("Android");
checkbox_2.selected = true;//设置为默认选中状态
checkbox_2.pos(30, 50);//设置checkbox的坐标位置
//创建第3个复选框
var checkbox_3 = add_checkbox("LayaBox");
checkbox_3.pos(30, 90);//设置checkbox的坐标位置
}
//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText){
var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例
checkbox.label = labelText;//设置文本标签内容
checkbox.labelSize = 20;//label文本字体大小
Laya.stage.addChild(checkbox);//添加到舞台上显示
return checkbox;
}
获取选中状态
| selected : Boolean ，设置与获取按钮的选中状态。 如果值为true，表示该对象处于选中状态，否则该对象处于未选中状态。 |
1、上面的例子中已经示范了设值 selected=true 即可让复选框默认选中，同理也可以使用 selected 属性获取选取状态。
//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
var label_show;//标签对象
//资源路径-复选框皮肤路径，自定义皮肤，位于 bin 目录下
var skin_checkbox = "ui/checkbox_myself.png";
//加载皮肤成功后执行onLoad回调方法
Laya.loader.load(skin_checkbox, Laya.Handler.create(this, onLoaded));
function onLoaded() {
//创建复选框
var checkbox = add_checkbox("LayaBox");
checkbox.pos(30, 10);//设置checkbox的坐标位置
showLabel();
checkbox.on(Laya.Event.CLICK, this, function () {//为复选框绑定单击事件
if( checkbox.selected == true){
label_show.text = "已选中";
} else {
label_show.text = "未选中";
}
});
}
//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText) {
var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例
checkbox.label = labelText;//设置文本标签内容
checkbox.labelSize = 20;//label文本字体大小
Laya.stage.addChild(checkbox);//添加到舞台上显示
return checkbox;
}
//显示一个标签
function showLabel(){
label_show = new Laya.Label();//创建标签对象
label_show.fontSize = 40;//设置标签字体为20px
label_show.color = "#CC6633";//字体颜色白色
label_show.pos(30,50);//标签显示位置
Laya.stage.addChild(label_show);//添加到舞台
}
更多内容可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-2