如何在 Flash 中为图块列表创建自定义单元格渲染器

Question

我需要在我的项目中实现自定义单元格渲染器，我在谷歌上进行了一些搜索，但找不到我需要的东西。

我需要tile list中的每个cell来显示2个带有几个标签的图标。我需要一个很好的例子来开始它。

如果可能的话，我需要一种方法将模板设计为MovieClip并将其传递给tilelist以渲染单元格。

Answer 1

要构建自定义单元格渲染器，您需要从可用的 listClasses。 ImageCell 看起来是一个好的开始为您的项目。

您将：

1. 扩展列表类，
2. 在（标签/文本字段等）中添加您自己的位，
3. 覆盖受保护的函数，以根据您的需要调整新的单元格（一个示例是drawLayout方法，您需要在其中整齐地放置项目）。

这是一个非常基本的示例：

package
{
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ImageCell;
    import fl.controls.TileList;
    import fl.data.DataProvider;
    import fl.managers.StyleManager;
    import flash.events.EventDispatcher;
    import flash.events.*;
    import fl.containers.UILoader;

    public class CustomImageCell extends ImageCell implements ICellRenderer
    {  

        public function CustomImageCell() 
        {
            super();

            //do other stuff here

            loader.scaleContent = false;
            loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);

            useHandCursor = true;
        }

        override protected function drawLayout():void
        {
            var imagePadding:Number = getStyleValue("imagePadding") as Number;
            loader.move(11, 5);

            var w:Number = width-(imagePadding*2);
            var h:Number = height-imagePadding*2;
            if (loader.width != w && loader.height != h)
            {
                loader.setSize(w,h);
            }
            loader.drawNow(); // Force validation!

        }
        override protected function handleErrorEvent(event:IOErrorEvent):void {
            trace('ioError: ' + event);
            //dispatchEvent(event);
        }
    }
}

post< 上有一个非常好的示例，可以满足您的需求。 /a>.
那里提供的自定义单元格：

1. 支持自定义背景（通过设置单元格皮肤）
2. 使用标签 TextField。

华泰

Answer 2

创建一个名为 MyRenderer.mxml 的文件，粘贴以下内容：

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image id="img" width="123" height="123" />
<mx:Script><![CDATA[
override public function set data (value:Object):void {
    super.data = value;
    // mess with img here
}
]]></mx:Script>
</mx:Box>

在图块列表中，写入以下内容：

<mx:TileList itemRenderer="MyRenderer" ... />