Apache flex 如何在spark列表中呈现DisplayObject实例集合？

是否可以从DisplayObjects的ArrayCollection（即：Canvas）中创建一个Spark列表来显示项目？除非指定itemRenderer，否则下面的代码不会呈现任何内容

<s:List dataProvider="{ displayObjects }"> 
    <s:layout>
        <s:VerticalLayout rowHeight="290" gap="20" />
    </s:layout>
</s:List>

原因是利用列表的拖放功能重新排列自定义组件。目前，我使用的是VGroup（没有拖放功能），不想重新创建“免费”使用列表控件获得的所有拖放功能。其他可行的解决方案也可以接受

TIA.

试试这个：

//应用

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600" 
           creationComplete="init()">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.containers.Canvas;

        [Bindable]private var displayObjects:ArrayCollection = new ArrayCollection();
        [Bindable]private var size:int = 40;

        private const COLOR:Array = ["0x00ff00", "0xff0000", "0x0000ff", "0xffff00" , "0x00ffff"];

        private function doAddCanvas(colorId:int):Canvas
        {
            var canvas:Canvas = new Canvas();
            canvas.setStyle("backgroundColor", COLOR[colorId]);
            canvas.width = size;
            canvas.height = size;
            return canvas;
        }

        protected function init():void
        {
            for (var i:int = 0; i < 5; i++)
                displayObjects.addItem(doAddCanvas(i));
        }
    ]]>
</fx:Script>

<s:VGroup x="20" y="20">
    <s:List 
        width="100" height="150" 
        dataProvider="{displayObjects}" 
        itemRenderer="com.ListItemRenderer" 
        dragEnabled="true" dropEnabled="true" 
        dragMoveEnabled="true">

        <s:layout>
            <s:VerticalLayout rowHeight="{size}" gap="20" />
        </s:layout>
    </s:List>
</s:VGroup>
</s:Application>

//项目渲染器

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">
<fx:Script>
    <![CDATA[
        import mx.containers.Canvas;

        override public function set data(value:Object):void
        {
            if (value != null)
            {
                hgMain.removeAllElements();
                hgMain.addElement(value as Canvas);
            }
            super.data = value;
        }
    ]]>
</fx:Script>

<s:HGroup id="hgMain" width="100%" height="100%"/>

</s:ItemRenderer>

我认为您的问题已经包含了您的解决方案。您必须创建一个自定义itemRenderer来渲染DisplayObject。默认itemRenderer希望显示字符串。我有点惊讶，什么都没有显示；我希望您会看到[object object]或类似的内容。不过，您必须将这些DisplayObject注入itemrenderer（类似于

覆盖公共函数集数据（值：object）：void{if（值）addElement（值）；}

）。我觉得有点黑客味。这不起作用，因为在itemRenderer中设置

数据之前会调用
createChildren
。因此，您最终将看到为该组件指定了多组可视子组件（基本组件定义和派生组件定义）。