自訂 ComboBox 組件

您可以在編寫期間和執行階段，沿水平和垂直方向變形 ComboBox 組件。在編寫期間，請在「舞台」上選取組件，並且使用「自由變形」工具或任何「修改 > 變形」命令。在執行階段，請使用 setSize() 方法或 ComboBox 類別適用的屬性 (如 height 和 width 以及 scaleX 和 scaleY )。

ComboBox 會調整大小以符合指定的寬度與高度。除非已經設定 dropdownWidth 屬性，否則此清單將會調整大小以符合該組件的寬度。

如果文字太長而無法容納在 ComboBox 中，就會裁剪文字來配合。您必須調整 ComboBox 的大小，並且設定 dropdownWidth 屬性以符合文字。

對 ComboBox 組件使用樣式

您可以設定樣式屬性來變更 ComboBox 組件的外觀。這些樣式會指定該組件的外觀元素、儲存格輸出器、邊框間距與按鈕寬度的值。下列範例會設定 buttonWidth 和 textPadding 樣式。 buttonWidth 樣式會設定該按鈕作用區域的寬度；當 ComboBox 可以編輯，而且您只需下該按鈕即可開啟下拉式清單時，此樣式便會生效。textPadding 樣式則指定文字欄位外圍邊框與文字之間的間距大小。如果您將 ComboBox 設定得更高一些，上述作法對於將文字在垂直方向置中對齊會很有用。否則，文字可能就會出現在文字欄位的頂端。

  1. 建立新的 Flash 檔案 (ActionScript 3.0) 文件。

  2. 將 ComboBox 組件拖曳到「舞台」，並為它指定實體名稱 aCb 。

  3. 開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列程式碼： 

    import fl.data.DataProvider; 
 
aCb.setSize(150, 35); 
aCb.setStyle("textPadding", 10); 
aCb.setStyle("buttonWidth", 10); 
aCb.editable = true; 
 
var items:Array = [ 
{label:"San Francisco", data:"601 Townsend St."}, 
{label:"San Jose", data:"345 Park Ave."}, 
{label:"San Diego", data:"10590 West Ocean Air Drive, Suite 100"}, 
{label:"Santa Rosa", data:"2235 Mercury Way, Suite 105"}, 
{label:"San Luis Obispo", data:"3220 South Higuera Street, Suite 311"} 
]; 
aCb.dataProvider = new DataProvider(items);

  4. 選取「控制 > 測試影片」。

    請注意，只有位於右邊的狹窄區域是按一下即可開啟下拉式清單的按鈕區域。此外，還要注意一件事，就是文字欄位中的文字會在垂直方向置中對齊。您可以嘗試在不使用這兩個 setStyle() 陳述式的情況下執行此範例，並得知它們所造成的影響。

搭配 ComboBox 使用外觀元素

ComboBox 會使用下列外觀元素來代表其視覺狀態：

ComboBox 外觀元素

您可以變更「Up Skin」的顏色，以變更「舞台」上組件在其非作用狀態中的顏色。

  1. 建立新的 Flash 檔案 (ActionScript 3.0) 文件。

  2. 將 ComboBox 組件拖曳到「舞台」。

  3. 按兩下該組件，開啟其外觀元素的面板。

  4. 按兩下「Up Skin」，直到選取該外觀元素並開啟以供編輯為止。

  5. 將縮放控制項設定為 400%。

  6. 按一下外觀元素的中心區域，直到其顏色出現在「屬性」檢測器的「填色」顏色挑選器中為止。

  7. 使用「填色」顏色挑選器選取 #33FF99，以便將該顏色套用到「Up Skin」。

  8. 按一下「舞台」上方編輯列左側的「後退」按鈕，回到文件編輯模式。

  9. 選取「控制 > 測試影片」。

    ComboBox 應該會出現在「舞台」上，如下圖所示。

    「Background Skin」為自訂顏色的 ComboBox
    背景外觀元素為自訂顏色的 ComboBox