[AS3] 組件List、Button、Combobox的樣式設定

有的時候，組件真的是Flash裡面好用簡單的幾個基本元件，當然最重要的好處就是不需要額外花太多心思去設計這些組件的外觀，用起來也就省事很多，而且都是內建組件庫裡面有的東西。

但是要怎麼去改變組件的樣式？在Flash的教學文件中有自訂組件樣式的章節，大家可以多多參考，這邊也提一些簡易修改組件外觀、文字樣式的方法。




首先，先建立一個format類別，讓之後所有的組件可以套用。

//format設定
var format:TextFormat = new TextFormat();
format.size = 20;//字體大小
format.bold = true;//是否為粗體
format.align = "left";//文字靠左

1. Button
最基本的組件Button，並且將名稱取為button。

var button:Button = new Button();

套用組件Button的名稱和樣式。

button.label = "Click";//button顯示名稱
button.setStyle("textFormat", format);//套用format
addChild(button);

上述第二行就可以成功將format套用至組件Button上

2. List
套用format至List

var list:List = new List();

//將format套用至List
list.setRendererStyle("textFormat", format);

//設定List清單中列的高度
list.rowHeight = 30;

//加入List內容;
list.addItem( { label:"Item 1" } );
list.addItem( { label:"Item 2" } );
list.addItem( { label:"Item 3" } );
addChild(list);

3. ComboBox
這個組件比較麻煩，因為它特別的包含了List和TextInput兩個功能的特性，它會產生像List一樣的下拉式選單，也可以自行編輯清單以外的項目。

填入項目的方法跟List一樣，用addItem()方法。

var combo:ComboxBox = new ComboxBox();
combo.addItem( { label:"Item 1" } );
combo.addItem( { label:"Item 2" } );
combo.addItem( { label:"Item 3" } );

改變ComboBox的樣式分成兩個部份，一個是最上層清單顯示的文字，與下拉式清單的文字（點選選單才會出現的下拉式清單），這兩個部份要分開設定，也就是說可以設定成不一樣的樣式。

//設定ComboBox最上層清單的文字樣式
combo.textField.setStyle("textFormat", format);

如果直接把程式把寫成：

//設定ComboBox最上層清單的文字樣式
combo.setStyle("textFormat", format);//錯誤寫法

基本上不會有錯，但是樣式卻跑不出來。
ComboBox有個屬性是textField，它的說明是「會取得 ComboBox 組件所包含之 TextInput 組件的參考。 您可以使用此屬性，存取並操作下一層的 TextInput 組件。 例如，您可以使用此屬性來變更文字方塊的選取範圍，或限制其中可以輸入的字元組。」，就是說與文字有關的相關屬性，都要透過textField屬性才能對ComboBox進行設定。所以在設定ComboBox的setStyle屬性前加上textField就可以正常套用樣式了。

//設定ComboBox下拉式清單的文字樣式
combo.dropdown.setRendererStyle("textFormat", format);

//設定ComboBox下拉式清單每列高度
combo.dropdown.rowHeight = 30;

同上述的理由，使用ComboBox內的dropdown屬性。「會取得 ComboBox 組件所包含之 List 組件的參考。」
所以等於是透過dropdown屬性設定ComboBox內List的樣式設定。
設定清單高度亦然，如果只寫：

combo.rowHeight = 30;//錯誤寫法

上面程式會顯示錯誤，因為ComboBox沒有一個名為rowHeight的屬性或方法。