flex 内联 itemRenderer《一》

我在本文中使用内联 itemRenderer 说明如何解决这个问题。内联 itemRenderer 直接写入
MXML 文件中列表控制出现的位置。我在下一篇文章中将说明如何编写外部 itemRenderer。内
联 itemRenderer 最简单, 一般用于十分简单的渲染器或用于为较大的应用程序构建原型。内联
itemRenderer 本身并没有问题, 但随着代码变得复杂, 最好将它提取到自己的类中。

我将在所有示例中使用相同的数据: 一组书籍相关信息－作者、书名、出版日期和缩览图图
像等。每个记录是一段 XML 代码, 如下:

<book> 
    <author>Peter F. Hamilton</author> 
    <title>Pandora's Star</title> 
    <image>assets/pandoras_star_.jpg</image> 
<date>Dec 3, 2004</date> 
</book> 

我将从使用 <mx:List> 控制的一个简单 itemRenderer  开始。这里将列出作者,  后跟书名。

<mx:List x="29" y="67" dataProvider="{testData.book}" width="286" height="190"> 
    <mx:itemRenderer> 
        <mx:Component> 
            <mx:Label text="{data.author}: {data.title}" /> 
        </mx:Component> 
    </mx:itemRenderer> 
</mx:List> 

这个 itemRenderer 太简单了, 可能使用 labelFunction 会更好, 但它至少允许您专注于重
要部分。首先, 内联 itemRenderer 使用 <mx:itemRenderer> 标记定义它。这个标记包含
<mx:Component> 标记。这个标记必须放在这里, 因为它会告诉 Flex 编译器您正在定义一个组
件内联。我马上会说明这到底是什么意思。

您在 <mx:Component> 标记中定义 itemRenderer。对于本例, 它是一个 <mx:Label> 并且
文本字段设置为一个数据绑定表达式: {data.author}: {data.title}。这点很重要。List 控
制通过设置 itemRenderer 的 data 属性, 为每个 itemRenderer 实例提供 dataProvider 的记
录。对于上述代码, 它意味着对于任何给定列表行, 内联 itemRenderer 实例将自己的 data 属
性设置为 <book> XML 节点 (如以上节点)。当您滚动列表时, data 属性也会更改, 因为
itemRenderer 被循环用于新行。

换言之, 行 1 的 itemRenderer 实例现在可能将其 data.author 设置为“Peter F.
Hamilton”, 但当它滚出视图时, itemRenderer 被循环使用并且 (该  itemRenderer) 的data 属
性现在可能将其 data.author 设置为“J.K. Rowling”。滚动列表时, 所有这一切都会自动进行－
您不必操心。
以下是复杂一些的内联 itemRenderer, 它还是使用 <mx:List> 控制:

<mx:List x="372" y="67" width="351" height="190" variableRowHeight="true" 
dataProvider="{testData.book}"> 
   <mx:itemRenderer> 
       <mx:Component> 
           <mx:HBox > 
               <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" /> 
               <mx:Label text="{data.author}" width="125" /> 
               <mx:Text  text="{data.title}" width="100%" /> 
           </mx:HBox> 
       </mx:Component> 
   </mx:itemRenderer> 
</mx:List>


确实区别不大。这次不是 <mx:Label>, itemRenderer 是一个 <mx:HBox> 并包含

<mx:Image>、<mx:Label> 和 <mx:Text> 控制。数据绑定依然将可视与记录关联在一起。




 
节选flex itemrender文档