LayaAir UI 组件 # CheckBox 复选框

雨点打透心脏的1/2处 2022-04-02 11:40 427阅读 0赞

**目录**

CheckBox 组件

默认checkbox 资源

自定义组件皮肤

获取选中状态

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

# CheckBox 组件 #

<table> 
 <tbody> 
  <tr> 
   <td><strong>Package</strong></td> 
   <td>laya.ui</td> 
  </tr> 
  <tr> 
   <td><strong>类</strong></td> 
   <td>public class CheckBox</td> 
  </tr> 
  <tr> 
   <td><strong>Inheritance</strong></td> 
   <td>CheckBox <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141">Button <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141">Component <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141">Sprite <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141">Node <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141">EventDispatcher <img alt="Inheritance" src="https://img-blog.csdnimg.cn/20181226155303141"> Object</td> 
  </tr> 
 </tbody> 
</table>

1、CheckBox 组件显示一个小方框，该方框内可以有选中标记，CheckBox 组件还可以显示可选的文本标签，默认该标签位于 CheckBox 右侧。

2、CheckBox 使用 dataSource 赋值时的的默认属性是：selected。

3、CheckBox 继承自 [Button][]，所以使用起来基本与 《[LayaAir UI 组件 \# Button][LayaAir UI _ _ 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.CheckBox#dataSource" rel="nofollow">dataSource</a> : *&nbsp; &nbsp;，[override] 数据赋值，通过对UI赋值来控制UI显示逻辑。 简单赋值会更改组件的默认属性，使用大括号可以指定组件的任意属性进行赋值。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <th colspan="2">Method</th> 
  </tr> 
  <tr> 
   <td> <p><a href="https://layaair.ldc.layabox.com/api/?category=UI&amp;class=laya.ui.CheckBox#CheckBox%28%29" rel="nofollow">CheckBox</a>(skin:String = null, label:String)&nbsp; &nbsp;，创建一个新的 CheckBox 组件实例。skin:String (default = null) — 皮肤资源地址。label:String — 文本标签的内容。</p> </td> 
  </tr> 
 </tbody> 
</table>

## 默认checkbox 资源   ##

![20181226153632606.gif][]

1、CheckBox 组件的选择框图片是 CheckBox 组件的皮肤（skin），图片资源命名通常是 check、checkbox或以check\_为前缀。

2、CheckBox 组件资源通常是由三态或两态的 skin 图片组成，最上面第一个小框为未选中状态，中间的小框为鼠标悬停的状态，底部小框为选中时状态。

3、使用方式与《[LayaAir UI 组件 \# Button][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;
    }

![20181226154225580.gif][]

## 自定义组件皮肤 ##

1、操作与《[LayaAir UI 组件 \# Button][LayaAir UI _ _ Button]》中的 [自定义按钮资源][Link 1] 基本一致。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

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

![20181226160250488.gif][]

# 获取选中状态 #

<table> 
 <tbody> 
  <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，表示该对象处于选中状态，否则该对象处于未选中状态。</td> 
  </tr> 
 </tbody> 
</table>

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);//添加到舞台
    }

![20181226162610866.gif][]

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

[Button]: https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Button
[LayaAir UI _ _ Button]: https://blog.csdn.net/wangmx1993328/article/details/85259089
[20181226153632606.gif]: /images/20220402/69764ce0975e40cf89ee91f8005fed9e.png
[20181226154225580.gif]: /images/20220402/801668e9441d44d48f00e4d8440f0923.png
[Link 1]: https://blog.csdn.net/wangmx1993328/article/details/85259089#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%89%E9%92%AE%E8%B5%84%E6%BA%90
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220402/ce90366f37574996bb6e05c86758f4a2.png
[20181226160250488.gif]: /images/20220402/d8a932983225436f9050f54398f8349a.png
[20181226162610866.gif]: /images/20220402/63b85e239819487094a7037e62e6f422.png
[https_ldc.layabox.com_doc_nav_zh-js-2-3-2]: https://ldc.layabox.com/doc/?nav=zh-js-2-3-2