Laya學習筆記-13ComboBox

一、什麼是ComboBox？

laya.ui.ComboBox 組件包含一個下拉列表，用戶可以從該列表中選擇單個值

 

二、屬性

Property

button : Button

[read-only] 獲取對 ComboBox 組件所包含的 Button 組件的引用。

dataSource : *

[override] 數據賦值，通過對UI賦值來控制UI顯示邏輯。 簡單賦值會更改組件的默認屬性，使用大括號可以指定組件的任意屬性進行賦值。

height : Number

[override] 表示顯示對象的高度，以像素爲單位。 注：當值爲0時，高度爲自適應大小。

isOpen : Boolean

表示下拉列表的打開狀態。

itemColors : String

下拉列表項顏色。 格式："懸停或被選中時背景顏色,懸停或被選中時標籤顏色,標籤顏色,邊框顏色,背景顏色"

itemRender : * = null

渲染項，用來顯示下拉列表展示對象

itemSize : int

下拉列表項標籤的字體大小。

labelBold : Boolean

表示按鈕文本標籤是否爲粗體字。

labelColors : String

獲取或設置對 ComboBox 組件所包含的 Button 組件的文本標籤顏色。 格式：upColor,overColor,downColor,disableColor

labelFont : String

表示按鈕文本標籤的字體名稱，以字符串形式表示。

labelPadding : String

獲取或設置對 ComboBox 組件所包含的 Button 組件的文本邊距。 格式：上邊距,右邊距,下邊距,左邊距

labels : String

標籤集合字符串。

labelSize : int

獲取或設置對 ComboBox 組件所包含的 Button 組件的標籤字體大小。

list : List

獲取對 ComboBox 組件所包含的 List 列表組件的引用。

scrollBar : VScrollBar

[read-only] 獲取對 ComboBox 組件所包含的 VScrollBar 滾動條組件的引用。

scrollBarSkin : String

滾動條皮膚。

selectedIndex : int

表示選擇的下拉列表項的索引。

selectedLabel : String

表示選擇的下拉列表項的的標籤。

selectHandler : Handler

改變下拉列表的選擇項時執行的處理器(默認返回參數index:int)。

sizeGrid : String

當前實例的位圖 AutoImage 實例的有效縮放網格數據。 數據格式："上邊距,右邊距,下邊距,左邊距,是否重複填充(值爲0：不重複填充，1：重複填充)"，以逗號分隔。 例如："4,4,4,4,1"

skin : String

對象的皮膚資源地址。 支持單態，兩態和三態，用 stateNum 屬性設置 對象的皮膚地址，以字符串表示。

stateNum : int

表示按鈕的狀態值。

visibleNum : int

獲取或設置沒有滾動條的下拉列表中可顯示的最大行數。

width : Number

[override] 表示顯示對象的寬度，以像素爲單位。 注：當值爲0時，寬度爲自適應大小。

 

三、公開方法

Method

ComboBox(skin:String = null, labels:String = null)

創建一個新的 ComboBox 組件實例。

destroy(destroyChild:Boolean = true):void

[override] 銷燬此對象。destroy對象默認會把自己從父節點移除，並且清理自身引用關係，等待js自動垃圾回收機制回收。destroy後不能再使用。 destroy時會移除自身的事情監聽，自身的timer監聽，移除子對象及從父節點移除自己。

 

四、Events

Event
change	當用戶更改 ComboBox 組件中的選定內容時調度。

 

五、代碼示例

export default class ComboBoxText extends Laya.ComboBox {

    constructor() {
        super();

        this.labels="label1,label2,label3,label4";

        Laya.stage.timerLoop(100,this,function(){

            this.selectHandler=Laya.Handler.create(this,function(index){

                console.log(index);
                console.log(this.selectedLabel);
            });

        });
    }
   
}

 

參考資料：

 官方API ：https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.Clip