Question

我在创建完成时有一个由xml填充的TileList，我希望将所选项目中的图像传递给图像组件的源。

这是主要的应用程序：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="#FFFFFF">
<mx:ArrayCollection id="theImages"></mx:ArrayCollection>
<mx:Model id="items" source="items.xml" />
<mx:Script>
    <![CDATA[
        import ItemListObject;
        public function initList():void
         {
          for each ( var node:Object in items.image ) {
           var temp:ItemListObject = new ItemListObject();
           temp.strThumbnail = node.strThumbnail;
           temp.title = node.title;
           theImages.addItem(temp);
          }
 }
    ]]>
</mx:Script>
<mx:XML source="adjectives.xml" id="adjectivesXML"/>
    <mx:Canvas x="20" y="20">
        <mx:Image 
            id="item"
            source="????" 
            autoLoad="true" 
            width="500" 
            height="500" 
            scaleContent="true"/>
    </mx:Canvas>
    <mx:TileList id="imageTileList"
        itemRenderer="CustomItemRenderer"
        dataProvider="{theImages}"
        width="400"
        height="400"
        columnCount="2"
        creationComplete="initList();"/>
    </mx:Application>

我为Image组件的源代码尝试了不同的东西，但没有任何工作，所以我只放了4个问号。这是CustomItemRenderer：

    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center"
    verticalAlign="middle"
    verticalGap="0"
    width="150"
    height="150"
    paddingRight="5"
    paddingLeft="5"
    paddingTop="5"
    paddingBottom="5">

    <mx:Image id="img" height="100" width="100" source="{data.strThumbnail}" />
    <mx:Label height="20" width="75" text="{data.title}" textAlign="center" color="0x000000" fontWeight="normal" />
</mx:VBox>

这是items.xml：

<?xml version="1.0" encoding="utf-8"?>
<items>
 <image id="1">
    <title>Image 1</title>
    <strThumbnail>1.jpg</strThumbnail>
 </image>
 <image id="2">
    <title>Image 2</title>
    <strThumbnail>2.jpg</strThumbnail>
 </image>
 <image id="3">
    <title>Image 3</title>
    <strThumbnail>3.jpg</strThumbnail>
 </image>
 <image id="4">
    <title>Image 4</title>
    <strThumbnail>4.jpg</strThumbnail>
 </image>    
</items>

这是ItemsListObject.as

package
{
 [Bindable]
 public class ItemListObject extends Object
 {
  public function ItemListObject() {
   super();
  }

  public var title:String = new String();
  public var strThumbnail:String = new String();
 }
}

这是一个非常粗略的例子，但是一旦我克服了这个驼峰，我将能够做更多我正在尝试做的事情。谢谢你的阅读。

Answer 1

最快的方法是：

<mx:Image id="img" source="{imageTileList.selectedItem.strThumbnail}" />

数据对象用于不在其外部的项呈示器中。一个数据对象表示您传递到渲染器的xml中的一个图像。

请务必查看项目渲染器here的文档。

Flex 3 XML fed TileList将所选项目传递给另一个组件

1 个答案: