apache flex - TileList item Display

Question

我正在使用Flex 4。

我用TileList创建了一个图像库当我点击TileList中的一个项目时，我希望图像在BitmapImage中显示在TileList的旁边。

有人能帮我吗？

请参阅下面的代码。现在图像已加载到弹出窗口中。。我希望它显示在BitmapImage框中。

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html" xmlns:s="library://ns.adobe.com/flex/spark">
    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import flash.utils.flash_proxy;
            import mx.controls.Image;
            import mx.effects.Resize;
            import mx.events.ItemClickEvent;
            import mx.events.ListEvent;
            import mx.events.ResizeEvent;
            import mx.managers.PopUpManager;
            private var img:Image;
            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }
            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }
            private function image_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>
    <mx:WipeDown id="image_addedEffect" startDelay="100" />
    <mx:Parallel id="image_removedEffect">
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>
    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on"
            itemClick="tileList_itemClick(event);" />
    <s:BitmapImage id="bit" width="100%" height="100%"/>
</mx:Application>

感谢

Answer 1

尝试使用以下内容

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html" xmlns:s="library://ns.adobe.com/flex/spark">
    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>
    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            verticalScrollPolicy="on" />
    <mx:Image id="bit" width="100%" height="100%" source="{tileList.selectedItem.@fullImage}"/>
</mx:Application>