Flex 内联渲染器（下）

Flex 内联渲染器（上）
<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> 控制。数据绑定依然将可视与记录关联在一起。

查看更多 下一篇