使用 TileList 组件

与 TileList 组件的用户交互
TileList 组件参数
创建具有 TileList 组件的应用程序
- 使用 ActionScript 创建 TileList 组件

TileList 组件由一个列表组成，其中的行和列由数据提供程序提供的数据填充。项目是指在 TileList 中的单元格中存储的数据单元。项目源自数据提供程序，通常有一个 label 属性和一个 source 属性。 label 属性标识要在单元格中显示的内容，而 source 则为它提供值。

您可以创建一个 Array 实例，也可以从服务器检索一个。TileList 组件具有代理到其数据提供程序的方法，如 addItem() 和 removeItem() 方法。如果没有为列表提供外部数据提供程序，则这些方法会自动创建一个数据提供程序实例，该实例会通过 List.dataProvider 被公开。

与 TileList 组件的用户交互

TileList 用实现 ICellRenderer 接口的 Sprite 来呈现每个单元格。您可以使用 TileList 的 cellRenderer 属性指定此渲染器。TileList 组件的默认 CellRenderer 是显示一个图像（类、位图、实例或 URL）和一个可选标签的 ImageCell。此标签是始终与单元格底部对齐的单行。您只能沿一个方向滚动 TileList。

当 TileList 实例获得焦点时，您还可以使用以下键访问其内部的项目：

键	说明
向上箭头和向下箭头	用于在列中向上和向下移动。如果 `allowMultipleSelection` 属性为 `true` ，则您可以使用这些键与 Shift 键的组合来选择多个单元格。
向左箭头和向右箭头	用于在行中向左或向右移动。如果 `allowMultipleSelection` 属性为 `true` ，则您可以使用这些键与 Shift 键的组合来选择多个单元格。
主页	选择 TileList 中的第一个单元格。如果 `allowMultipleSelection` 属性为 `true` ，则按住 Shift 键并按 Home 键将会选择从您当前所选位置到第一个单元格的所有单元格。
End	选择 TileList 中的最后一个单元格。如果 `allowMultipleSelection` 属性为 `true` ，则按住 Shift 并按 End 键将会选择从您当前所选位置到最后一个单元格的所有单元格。
Ctrl	如果 `allowMultipleSelection` 属性设置为 `true` ，则使用它可以不按特定顺序选择多个单元格。

向应用程序添加 TileList 组件时，可以通过添加以下 ActionScript 代码行使其可由屏幕读取器访问：

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

无论组件有多少实例，都只对组件启用一次辅助功能。有关详细信息，请参阅 《使用 Flash》 中的第 18 章“创建具有辅助功能的内容”。

TileList 组件参数

您可以在“属性”检查器或“组件”检查器中为每个 TileList 组件实例设置下列创作参数： allowMultipleSelection 、 columnCount 、 columnWidth 、 dataProvider 、 direction 、 horizontalScrollLineSize 、 horizontalScrollPageSize 、 labels 、 rowCount 、 rowHeight 、 ScrollPolicy、verticalScrollLineSize 和 verticalScrollPageSize 。其中每个参数都有对应的同名 ActionScript 属性。有关使用 dataProvider 参数的信息，请参阅使用 dataProvider 参数。

您可以编写 ActionScript，通过利用 TileList 实例的方法、属性和事件来设置该实例的其他选项。有关详细信息，请参阅 《用于 Adobe® Flash® Professional CS5 的 ActionScript® 3.0 参考》 中的 TileList 类。

创建具有 TileList 组件的应用程序

本示例使用 MovieClips 填充具有颜料颜色数组的 TileList。

创建一个新的 Flash (ActionScript 3.0) 文档。
将一个 TileList 组件拖到舞台上，然后为其指定实例名称 aTl 。

打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下 ActionScript 代码：

import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBoxes:Array = new Array(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    aBoxes[i] = new MovieClip(); 
    drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();         
}

选择“控制”>“测试影片”对应用程序进行测试。

使用 ActionScript 创建 TileList 组件

此示例动态创建一个 TileList 实例，并向其添加 ColorPicker、ComboBox、NumericStepper 和 CheckBox 组件的实例。本示例创建一个包含标签和组件名称的 Array，然后显示 Array ( dp ) 并将其分配给 TileList 的 dataProvider 属性。本示例使用 columnWidth 和 rowHeight 属性以及 setSize() 方法来布置 TileList；使用 move() 方法来调整 TileList 在舞台上的位置；使用 contentPadding 样式在 TileList 实例的边框和内容之间添加空白；使用 sortItemsOn() 方法来按照内容的标签对内容进行排序。

创建一个新的 Flash (ActionScript 3.0) 文档。
从“组件”面板将以下组件拖到“库”面板中：ColorPicker、ComboBox、NumericStepper、CheckBox 和 TileList。

打开“动作”面板，在主时间轴中选择第 1 帧，然后输入以下 ActionScript 代码：

import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

选择“控制”>“测试影片”对应用程序进行测试。