使用 List 組件

此 List 組件是一個可以捲動的單選或複選清單方塊。清單也能顯示圖像 (包括其它組件)。若要加入項目供清單顯示，請按一下 label 或 data 參數欄位，開啟「值」對話方塊來指定。您也可以使用 List.addItem() 和 List.addItemAt() 方法加入項目至清單。

List 組件使用以零為基底的索引；索引為 0 的項目就是第一個顯示的項目。使用 List 類別方法和屬性來加入、移除或取代清單項目時，您可能需要指定清單項目的索引。

與 List 組件的使用者互動

您可以設定清單，讓使用者進行單選或複選。例如，瀏覽電子商務網站的使用者會需要選擇想購買的項目。清單中有 30 個項目，使用者只要捲動清單，按一下上面的項目即可選取該項目。

您也可以設計一份使用自訂影片片段做為列的 List，為使用者提供更多資訊。例如，在電子郵件應用程式中，每個信箱都可以是 List 組件，而且每列都可以擁有指示優先順序和狀態的圖示。

如果您按一下或者用 Tab 鍵跳到 List 上，它就會成為焦點，接著您可使用下列按鍵加以控制：

按鍵

說明

英數字母按鍵

跳到以 Key.getAscii() 做為標籤中第一個字元的下一個項目。

Control

切換按鍵以進行多個非連續的選取與取消選取動作。

向下鍵

選取範圍向下移動一個項目。

首頁

選取範圍移到清單頂端。

Page Down

選取範圍向下移動一頁。

Page Up

選取範圍向上移動一頁。

Shift

可進行連續選取。

向上鍵

選取範圍向上移動一個項目。

備註： 請注意，捲動的大小是以像素 (而非列) 為單位。
備註： Page Up 和 Page Down 鍵所使用的頁面大小比頁面所能容納的項目數目少一。例如，在一個十行的下拉式清單向下翻頁將會顯示項目 0-9、9-18、18-27，依此類推，每一頁有一個重疊項目。

如需有關控制焦點的詳細資訊，請參閱 Flash Professional 的 ActionScript 3.0 參考 中的「IFocusManager 介面」和「FocusManager 類別」，以及 使用 FocusManager 。

進行編寫時，「舞台」上每個 List 實體的即時預覽會反映您在「屬性」檢測器或「組件檢測器」中對參數的變更。

將 List 組件加入應用程式時，您可以加入下列 ActionScript 程式碼，讓螢幕朗讀程式能夠存取此組件： 

import fl.accessibility.ListAccImpl; 
 
ListAccImpl.enableAccessibility();

不論組件有多少個實體，您只需要啟用組件的輔助功能一次。如需詳細資訊，請參閱「使用 Flash」中的第 18 章「建立輔助功能內容」。

List 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 List 組件實體設定下列參數： allowMultipleSelection 、 dataProvider、horizontalLineScrollSize、horizontalPageScrollSize、horizontalScrollPolicy、multipleSelection、verticalLineScrollSize、verticalPageScrollSize 和 verticalScrollPolicy 。這些參數都具有相對應的 ActionScript 同名屬性。如需有關這些參數可能值的詳細資訊，請參閱 Flash Professional 的 ActionScript 3.0 參考 中的 List 類別。如需有關 dataProvider 參數用法的詳細資訊，請參閱 使用 dataProvider 參數 。

建立具有 List 組件的應用程式

下列範例說明如何在編寫時將 List 組件加入應用程式。

將簡易清單 List 組件加入應用程式

在此範例中，List 是由識別車型的標籤以及包含價格的資料欄位所組成。

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

  2. 將 List 組件從「組件」面板拖曳到「舞台」。

  3. 在「屬性」檢測器中，執行下列步驟：

    • 輸入實體名稱 aList 。

    • 指定 200 做為 W (寬度) 值。

  4. 使用「文字」工具在 aList 下方建立文字欄位，並且賦予實體名稱 aTf 。

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

    import fl.controls.List; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
// Create these items in the Property inspector when data and label 
// parameters are available. 
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.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

    此程式碼會使用 addItem() 方法，將三個項目填入 aList ，並為每個項目指定 label 值 (出現在清單中) 以及 data 值。當您選取 List 中的項目時，事件偵聽程式便會呼叫 showData() 函數，進而顯示所選取項目的 data 值。

  6. 選取「控制 > 測試影片」，編譯並執行此應用程式。

透過資料提供者填入 List 實體

此範例所建立的 List 也包含車型及其價格。不過，填入 List 的方式是透過資料提供者，而非使用 addItem() 方法。

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

  2. 將 List 組件從「組件」面板拖曳到「舞台」。

  3. 在「屬性」檢測器中，執行下列步驟：

    • 輸入實體名稱 aList 。

    • 指定 200 做為 W (寬度) 值。

  4. 使用「文字」工具在 aList 下方建立文字欄位，並且賦予實體名稱 aTf 。

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

    import fl.controls.List; 
import fl.data.DataProvider; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
var cars:Array = [ 
{label:"1956 Chevy (Cherry Red)", data:35000}, 
{label:"1966 Mustang (Classic)", data:27000}, 
{label:"1976 Volvo (Xcllnt Cond)", data:17000}, 
]; 
aList.dataProvider = new DataProvider(cars); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

  6. 選取「控制 > 測試影片」，查看 List 及其項目。

使用 List 組件控制 MovieClip 實體

下列範例會建立包含顏色名稱的 List，並且當您選取某個顏色時，該顏色就會套用到 MovieClip。

  1. 建立 Flash (ActionScript 3.0) 文件。

  2. 將 List 組件從「組件」面板拖曳到「舞台」，然後在「屬性」檢測器中為組件指定下列值：

    • 輸入 aList 做為實體名稱。

    • 輸入 60 做為 H 值。

    • 輸入 100 做為 X 值。

    • 輸入 150 做為 Y 值。

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

    aList.addItem({label:"Blue", data:0x0000CC}); 
aList.addItem({label:"Green", data:0x00CC00}); 
aList.addItem({label:"Yellow", data:0xFFFF00}); 
aList.addItem({label:"Orange", data:0xFF6600}); 
aList.addItem({label:"Black", data:0x000000}); 
 
var aBox:MovieClip = new MovieClip(); 
addChild(aBox); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) { 
    drawBox(aBox, event.target.selectedItem.data); 
}; 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(225, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. 選取「控制 > 測試影片」，執行應用程式。

  5. 按一下 List 中的顏色，讓這些顏色在 MovieClip 中顯示。

使用 ActionScript 建立 List 組件實體：

此範例使用 ActionScript 建立一份簡易清單，並使用 addItem() 方法填入清單。

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

  2. 將 List 組件從「組件」面板拖曳到「元件庫」面板。

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

    import fl.controls.List; 
 
var aList:List = new List(); 
aList.addItem({label:"One", data:1}); 
aList.addItem({label:"Two", data:2}); 
aList.addItem({label:"Three", data:3}); 
aList.addItem({label:"Four", data:4}); 
aList.addItem({label:"Five", data:5}); 
aList.setSize(60, 40); 
aList.move(200,200); 
addChild(aList); 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event):void { 
    trace(event.target.selectedItem.data); 
}

  4. 選取「控制 > 測試影片」，執行應用程式。