LayaAir UI 元件 # CheckBox 複選框
阿新 • • 發佈：2019-01-01
目錄
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 資源
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