自訂 List 組件

使用具有 List 組件的樣式
搭配 List 組件使用外觀元素

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

調整清單大小時，清單的列會在水平方向縮小，裁剪它們之內的任何文字；在垂直方向，清單將會視需要增加或移除列；捲軸也會視需要自動放置到定位。

使用具有 List 組件的樣式

您可以設定樣式屬性來變更 List 組件的外觀。繪製該組件時，這些樣式會指定該組件外觀元素和邊框間距的值。

這些各式各樣的外觀元素樣式可以讓您指定要用於外觀元素的不同類別。如需有關使用外觀元素樣式的詳細資訊，請參閱關於外觀元素。

下列程序會針對 List 組件，設定 contentPadding 樣式的值。請注意，此設定的值會減去 List 的大小，以符合內容周圍的邊框間距。如此一來，您可能就必須增加 List 的大小，以免 List 中的文字遭到裁切。

建立新的 Flash 檔案 (ActionScript 3.0) 文件。
將 List 組件從「組件」面板拖曳到「舞台」，並為它指定實體名稱 aList 。

在主要「時間軸」中選取「影格 1」，開啟「動作」面板，然後輸入下列程式碼，以設定 contentPadding 樣式並將資料加入 List 中：

aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

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

搭配 List 組件使用外觀元素

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

List 外觀元素

如需有關為 ScrollBar 進行外觀設定的詳細資訊，請參閱自訂 UIScrollBar 組件。如需有關為「焦點矩形」外觀元素進行外觀設定的資訊，請參閱自訂 TextArea 組件。

備註：變更某個組件中的 ScrollBar 外觀元素，也會變更使用該 ScrollBar 之其它所有組件的這個外觀元素。

按兩下「儲存格輸出器外觀」，開啟 List 儲存格不同狀態之外觀元素的第二個面板。

List 的儲存格輸出器外觀元素

您可以編輯這些外觀元素，以變更 List 之儲存格的外觀。下列程序會變更「Up Skin」的顏色，以變更 List 在正常非作用中狀態的外觀。

建立新的 Flash 檔案 (ActionScript 3.0) 文件。
將 List 組件從「組件」面板拖曳到「舞台」，並為它指定實體名稱 aList 。
按兩下 List，開啟其外觀元素的面板。
按兩下「Cell Renderer Skin」，開啟「儲存格輸出器」外觀元素的面板。
按兩下以開啟 Up_Skin 外觀元素，準備進行編輯。
按一下以選取該外觀元素的填色區域。「填色」顏色挑選器應該會出現在「屬性」檢測器中，而且具有該外觀元素目前的填色顏色。
使用「填色」顏色挑選器選取 #CC66FF，將該顏色套用到 Up_Skin 外觀元素的填色。
按一下「舞台」上方編輯列左側的「後退」按鈕，回到文件編輯模式。

在「時間軸」之「影格 1」的「動作」面板中加入下列程式碼，將資料加入 List：

aList.setStyle("contentPadding", 5); 
aList.setSize(145, 200); 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.rowCount = aList.length;

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

List 看起來應該如下圖：

具有自訂 Up_Skin 顏色的 List 儲存格

外框部分是設定 contentPadding 樣式的結果。