使用 List 组件

List 组件是一个可滚动的单选或多选列表框。列表还可显示图形及其他组件。您在单击标签或数据参数字段时,会出现“值”对话框,您可以使用该对话框来添加显示在列表中的项目。您也可以使用 List.addItem() List.addItemAt() 方法来将项添加到列表。

List 组件使用基于零的索引,其中索引为 0 的项目就是显示在顶端的项目。当使用 List 类的方法和属性添加、删除或替换列表项时,可能需要指定该列表项的索引。

与 List 组件进行用户交互

您可以建立一个列表,以便用户可以选择一项或多项。例如,用户访问电子商务 Web 站点时需要选择想要购买的项目。列表中一共有 30 个项目,用户可在列表中上下滚动,并通过单击选择一项。

您也可以设计一个列表,使用自定义影片剪辑作为行,这样就可以向用户显示更多信息。例如,在电子邮件应用程序中,每个信箱可能就是一个 List 组件,而每行可能会有指明优先级和状态的图标。

当 List 实例通过单击或 Tab 切换获得焦点时,可以使用以下按键来控制它:

说明

字母数字键

跳转到标签中以 Key.getAscii() 作为首字符的下一项。

Ctrl

允许选择和取消选择多个不相邻的项目的切换键。

向下箭头

选区会向下移动一项。

主页

选区会移动到列表顶端。

Page Down

选区会向下移动一页。

Page Up

选区会向上移动一页。

Shift

允许进行连续选择。

向上箭头

选区会向上移动一项。

注: 请注意,滚动单位为像素,而不是行。
注: Page Up 键和 Page Down 键使用的页的大小比可以显示的项数少一项。例如,在一个十行的下拉列表中向下翻页,将会依次显示第 0-9 项、第 9-18 项、第 18-27 项等等,每页都会有一个重叠项。

有关控制焦点的详细信息,请参阅 《用于 Adobe® Flash® Professional CS5 的 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 属性。有关这些参数的可能值的信息,请参阅 《用于 Adobe® Flash® Professional CS5 的 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 值。当您在列表中选择某一项时,事件侦听器将调用 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,当您选择某种颜色时,它将该颜色应用于影片剪辑。

  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 中的颜色,可以看到颜色会显示在影片剪辑中。

使用 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. 选择“控制”>“测试影片”以运行此应用程序。