我在本文中使用内联 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文档