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

Question

是否可以从DisplayObjects的ArrayCollection（即：Canvas）中显示Spark列表？除非我指定itemRenderer，否则类似下面代码的内容不会呈现任何内容。

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

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

TIA。

Answer 1

试试这个：

//应用

<?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>

// ItemRenderer的

<?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>