Flex列表控件itemrenderer问题答案

【问题标题】：Flex list control itemrenderer issueFlex列表控件itemrenderer问题
【发布时间】：2010-05-09 00:45:55
【问题描述】：

我正在制作一个小型照片库。我创建了一个 xml 文件并尝试使用 itemrenderer 将它链接到我的列表控件。但是，当我尝试保存文件时，我访问了未定义的属性“数据”错误。我认为我们应该使用“数据”来引用数据对象的当前行。这是我的代码...非常感谢！

<?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">
 <fx:Declarations>
  <fx:Model id="pictureXML" source="data/pictures.xml"/>
  <s:ArrayList id="pictureArray" source="{pictureXML.picture}"/>
 </fx:Declarations>



 <s:List id="pictureGrid" dataProvider="{pictureArray}" 
   horizontalCenter="0" top="20">
  <s:itemRenderer>
   <fx:Component>
    <s:HGroup>
     <mx:Image source="images/big/{data.source}" /> // where the error happen
     <s:Label text="{data.caption}"/> // where the error happen
    </s:HGroup>   

   </fx:Component>
  </s:itemRenderer>
 </s:List>


</s:Application>

我的 xml

<?xml version="1.0"?>
<album>
   <picture>
   <source>city1.jpg </source>
   <caption>City View 1</caption>
   </picture>
    <picture>
   <source>city2.jpg </source>
   <caption>City View 2</caption>
   </picture>
     <picture>
   <source>city3.jpg </source>
   <caption>City View 3</caption>
   </picture>
    <picture>
   <source>city4.jpg </source>
   <caption>City View 4</caption>
   </picture>
    <picture>
   <source>city5.jpg </source>
   <caption>City View 5</caption>
   </picture>
    <picture>
   <source>city6.jpg </source>
   <caption>City View 6</caption>
   </picture>
    <picture>
   <source>city7.jpg </source>
   <caption>City View 7</caption>
   </picture>
    <picture>
   <source>city8.jpg </source>
   <caption>City View 8</caption>
   </picture>
    <picture>
   <source>city9.jpg </source>
   <caption>City View 9</caption>
   </picture>
    <picture>
   <source>city10.jpg </source>
   <caption>City View 10</caption>
   </picture>
</album>

感谢您的帮助！！！

【问题讨论】：

错误是只发生在 mx:Image 行还是 mx:Image 和 s:Label 行？

标签： image flex4 itemrenderer

【解决方案1】：

<s:List id="pictureGrid" dataProvider="{pictureArray}" 
   horizontalCenter="0" top="20">
  <s:itemRenderer>
   <fx:Component>
      <s:ItemRenderer>
    <s:HGroup>
     <mx:Image source="images/big/{data.source}" /> // where the error happen
     <s:Label text="{data.caption}"/> // where the error happen
    </s:HGroup>   
    </s:ItemRenderer>
   </fx:Component>
  </s:itemRenderer>
 </s:List>

试试这个！它会工作

【讨论】：

【解决方案2】：

我认为您尝试访问的数据属性超出了范围，因为它位于内联 itemRenderer 中。尝试将您的 ItemRenderer 抽象到它自己的组件中，而不是将其作为内联组件。

您也可以访问内联 itemRenderer 以访问每个项目数据属性，但这更简洁......

我已将您的 IR 分离成它自己的组件，一切似乎都很好......

<!-- YOUR LIST -->
<s:List id="pictureGrid" dataProvider="{pictureArray}" 
                horizontalCenter="0" top="20"
                itemRenderer="TestRenderer"/> // reference new IR class here

<!-- NEW ITEMRENDERER CLASS -->
<?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">

        <s:HGroup>
            <mx:Image source="images/big/{data.source}" /> 
            <s:Label text="{data.caption}"/> 
        </s:HGroup>   

</s:ItemRenderer>

【讨论】：

【解决方案3】：

试试这个

 override public function set data(value:Object):void
   {
                super.data = value;
                if (data == null)
                    return;

                irImage.source = data.path; 
                            irText.text = data.caption   

  }


<s:HGroup>
            <mx:Image id="irImage" /> 
            <s:Label id="irText"text="{data.caption}"/> 
</s:HGroup>

如果这不起作用，请告诉我。

【讨论】：