使用 CellRenderer

设置单元格格式
定义自定义 CellRenderer 类
CellRenderer 属性
为 DataGrid 对象的列应用 CellRenderer
为可编辑单元格定义 CellRenderer
将图像、SWF 文件或影片剪辑用作 CellRenderer

CellRenderer 是一个类，基于 List 的组件（如 List、DataGrid、TileList 和 ComboBox）使用此类来操作和显示其各行的自定义单元格内容。自定义的单元格可以包含文本、预先构建的组件（如 CheckBox）或您可以创建的任何显示对象类。若要使用自定义 CellRenderer 来渲染数据，您可以扩展 CellRenderer 类或实现 ICellRenderer 接口来创建您自己的自定义 CellRenderer 类。

List、DataGrid、TileList 和 ComboBox 类为 SelectableList 类的子类。SelectableList 类包含 cellRenderer 样式。该样式用于定义组件用来渲染单元格的显示对象。

通过调用 List 对象的 setRendererStyle() 方法，可以调整 CellRenderer 使用的样式格式设置（请参阅设置单元格格式）。您也可以定义一个自定义类，将其用作 CellRenderer（请参阅定义自定义 CellRenderer 类）。

设置单元格格式

CellRenderer 类包含许多用于控制单元格格式的样式。

使用以下样式可以定义用于单元格不同状态（禁用、按下、指针经过和弹起）的外观：

disabledSkin 和 selectedDisabledSkin
downSkin 和 selectedDownSkin
overSkin 和 selectedOverSkin
upSkin 和 selectedUpSkin

以下样式用于设置文本的格式：
disabledTextFormat
textFormat
textPadding

可以通过调用 List 对象的 setRendererStyle() 方法或 CellRenderer 对象的 setStyle() 方法来设置这些样式。可以通过调用 List 对象的 getRendererStyle() 方法或 CellRenderer 对象的 getStyle() 方法来获取这些样式。还可以通过 List 对象的 rendererStyles 属性或 CellRenderer 对象的 getStyleDefinition() 方法访问定义所有渲染器样式（作为对象的命名属性）的对象。

可以调用 clearRendererStyle() 方法将样式重置为其默认值。

若要获取或设置列表中各行的高度值，请使用 List 对象的 rowHeight 属性。

定义自定义 CellRenderer 类

使用扩展 CellRenderer 类的类来定义自定义 CellRenderer

例如，下面的代码中包括两个类。ListSample 类用于实例化 List 组件，并且该类使用另一个类 CustomRenderer 来定义用于此 List 组件的单元格渲染器。CustomRenderer 类扩展了 CellRenderer 类。

选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“Flash 文件 (ActionScript 3.0)”，然后单击“确定”。
选择“窗口”>“组件”以显示“组件”面板。
在“组件”面板中，将 List 组件拖到舞台上。
如果 Flash 未显示“属性”检查器，请选择“窗口”>“属性”>“属性”。
选择 List 组件后，在“属性”检查器中设置属性：
- 实例名称：myList
- W（宽度）：200
- H（高度）：300
- X：20
- Y：20
在时间轴中选择图层 1 的第 1 帧，然后选择“窗口”>“动作”。

在“动作”面板中键入以下脚本：

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

选择“文件”>“保存”。为文件指定一个名称，然后单击“确定”按钮。
选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“ActionScript 文件”，然后单击“确定”按钮。

在脚本窗口中，输入以下代码来定义 CustomCellRenderer 类：

package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

选择“文件”>“保存”。将文件命名为 CustomCellRenderer.as，并将其放在 FLA 文件所在的目录中，然后单击“确定”按钮。
选择“控制”>“测试影片”。

使用实现 ICellRenderer 接口的类来定义自定义 CellRenderer

还可以使用继承 DisplayObject 类并实现 ICellRenderer 接口的任何类来定义 CellRenderer。例如，下面的代码定义了两个类。ListSample2 类将 List 对象添加到显示列表中，并将其 CellRenderer 定义为使用 CustomRenderer 类。CustomRenderer 类扩展了 CheckBox 类（CheckBox 类扩展了 DisplayObject 类）并实现了 ICellRenderer 接口。请注意，CustomRenderer 类为 ICellRenderer 接口中定义的 data 和 listData 属性定义了 getter 和 setter 方法。ICellRenderer 接口中定义的其他属性和方法（ selected 属性和 setSize() 方法）已在 CheckBox 类中定义：

选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“Flash 文件 (ActionScript 3.0)”，然后单击“确定”。
选择“窗口”>“组件”以显示“组件”面板。
在“组件”面板中，将 List 组件拖到舞台上。
如果 Flash 未显示“属性”检查器，请选择“窗口”>“属性”>“属性”。
选择 List 组件后，在“属性”检查器中设置属性：
- 实例名称：myList
- W（宽度）：100
- H（高度）：300
- X：20
- Y：20
在时间轴中选择图层 1 的第 1 帧，然后选择“窗口”>“动作”。

在“动作”面板中键入以下脚本：

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

选择“文件”>“保存”。为文件指定一个名称，然后单击“确定”按钮。
选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“ActionScript 文件”，然后单击“确定”按钮。

在脚本窗口中，输入以下代码来定义 CustomCellRenderer 类：

package 
{ 
    import fl.controls.CheckBox; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

选择“文件”>“保存”。将文件命名为 CustomCellRenderer.as，并将其放在 FLA 文件所在的目录中，然后单击“确定”按钮。
选择“控制”>“测试影片”。

使用元件定义 CellRenderer

还可以使用库中的元件定义 CellRenderer。必须为 ActionScript 导出此元件，并且此库元件的类名称必须有一个实现 ICellRenderer 接口或扩展 CellRenderer 类（或其子类之一）的关联类文件。

下面的示例使用库元件定义自定义 CellRenderer。

选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“Flash 文件 (ActionScript 3.0)”，然后单击“确定”。
选择“窗口”>“组件”以显示“组件”面板。
在“组件”面板中，将 List 组件拖到舞台上。
如果 Flash 未显示“属性”检查器，请选择“窗口”>“属性”>“属性”。
选择 List 组件后，在“属性”检查器中设置属性：
- 实例名称：myList
- W（宽度）：100
- H（高度）：400
- X：20
- Y：20
单击“参数”面板，然后双击 dataProvider 行的第二列。
在显示的“值”对话框中，单击加号两次以添加两个数据元素（标签分别设置为 label0 和 label1），然后单击“确定”按钮。
使用“文本”工具在舞台上绘制一个文本字段。
选择该文本字段后，在“属性”检查器中设置属性：
- 文本类型：动态文本
- 实例名称：textField
- W（宽度）：100
- 字体大小：24
- X：0
- Y：0
选择该文本字段后，选择“修改”>“转换为元件”。
在“转换为元件”对话框中进行以下设置，然后单击“确定”。
- 名称：MyCellRenderer
- 类型：MovieClip
- 为 ActionScript 导出：选中
- 在第一帧导出：选中
- 类：MyCellRenderer
- 基类：flash.display.MovieClip
  
  如果 Flash 显示“ActionScript 类警告”，请单击警告框中的“确定”按钮。
从舞台上删除新影片剪辑元件的实例。
在时间轴中选择图层 1 的第 1 帧，然后选择“窗口”>“动作”。

在“动作”面板中键入以下脚本：

myList.setStyle("cellRenderer", MyCellRenderer);

选择“文件”>“保存”。为文件指定一个名称，然后单击“确定”按钮。
选择“文件”>“新建”。
在显示的“新建文档”对话框中，选择“ActionScript 文件”，然后单击“确定”按钮。

在脚本窗口中，输入以下代码来定义 MyCellRenderer 类：

package { 
    import flash.display.MovieClip; 
    import flash.filters.GlowFilter; 
    import flash.text.TextField; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import flash.utils.setInterval; 
    public class MyCellRenderer extends MovieClip implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean; 
        private var glowFilter:GlowFilter; 
        public function MyCellRenderer() { 
            glowFilter = new GlowFilter(0xFFFF00); 
            setInterval(toggleFilter, 200); 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            textField.text = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
        public function set selected(s:Boolean):void { 
            _selected = s; 
        } 
        public function get selected():Boolean { 
            return _selected; 
        } 
        public function setSize(width:Number, height:Number):void { 
        } 
        public function setStyle(style:String, value:Object):void { 
        } 
        public function setMouseState(state:String):void{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}

选择“文件”>“保存”。将文件命名为 MyCellRenderer.as，并将其放在 FLA 文件所在的目录中，然后单击“确定”按钮。
选择“控制”>“测试影片”。

CellRenderer 属性

data 属性是一个包含为 CellRenderer 设置的所有属性的对象。例如，在下面的类（该类定义了一个扩展 Checkbox 类的自定义 CellRenderer）中，注意 data 属性的 setter 函数将 data.label 的值传递给从 CheckBox 类继承的 label 属性：

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

selected 属性用于定义列表中的某一单元格是否已被选中。

为 DataGrid 对象的列应用 CellRenderer

DataGrid 对象可以有多个列，并且可以为每个列指定不同的单元格渲染器。DataGrid 的每个列均由一个 DataGridColumn 对象表示，并且 DataGridColumn 类包含 cellRenderer 属性，可以通过此属性为该列定义 CellRenderer。

为可编辑单元格定义 CellRenderer

DataGridCellEditor 类定义了用于 DataGrid 对象中可编辑单元格的渲染器。当 DataGrid 对象的 editable 属性设置为 true 并且用户单击要编辑的单元格时，它将成为该单元格的渲染器。若要为可编辑单元格定义 CellRenderer，请为 DataGrid 对象的 columns 数组的每个元素设置 itemEditor 属性。

将图像、SWF 文件或影片剪辑用作 CellRenderer

CellRenderer 的子类 ImageCell 类定义用于渲染单元格（主要内容为图像、SWF 文件或影片剪辑的单元格）的对象。ImageCell 类包含以下用于定义单元格外观的样式：

imagePadding — 用于分隔单元格边缘和图像边缘的填充（以像素为单位）
selectedSkin — 用于指示所选状态的外观
textOverlayAlpha — 单元格标签后面叠加层的不透明度
textPadding — 用于分隔单元格边缘和文本边缘的填充（以像素为单位）

ImageCell 类是 TileList 类的默认 CellRenderer。