flex_item renderers(项渲染器);

=>TheFilmReelItemRenderer组件

<?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">
?? ?
?? ?<fx:Declarations>
?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?? ?</fx:Declarations>
?? ?
?? ?<s:layout>
?? ??? ?<s:VerticalLayout/>
?? ?</s:layout>
?? ?
?? ?<s:Label text="{data.labeltext}"/>
?? ?<s:BorderContainer borderColor="black" borderStyle="solid" borderWeight="2">
?? ??? ?<s:BitmapImage source="{data.imgsource}"/>
?? ?</s:BorderContainer>
?? ?
</s: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" pageTitle="电影胶卷_相片显示示例"> ?? ? ?? ?<fx:Script> ?? ??? ?<![CDATA[ ?? ??? ??? ?import mx.collections.ArrayCollection; ?? ??? ??? ??? ? ?? ??? ??? ?[Bindable] ?? ??? ??? ?private var arrayforgrid:ArrayCollection = new ArrayCollection([ ?? ??? ??? ??? ?{name:"唐龙",sex:"男",email:"tl@lf.com"},?? ??? ??? ??? ?{name:"楚源",sex: "男",email:"11@lf.com"} ?? ??? ??? ?]); ?? ??? ??? ? ?? ??? ??? ?[Bindable] ?? ??? ??? ?private var arrayWithImg:ArrayCollection = new ArrayCollection([ ?? ??? ??? ??? ?{name: "TL.William,Jr",thumbnail:"img/huitail.gif"},?? ??? ??? ??? ?{name: "tanglong",thumbnail:"img/jiafm.gif"},?? ??? ??? ??? ?{name: "楚源",thumbnail:"img/kaomao.gif"} ?? ??? ??? ?]); ?? ??? ??? ? ?? ??? ?]]> ?? ?</fx:Script> ?? ? ?? ?<fx:Declarations> ?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 --> ?? ?</fx:Declarations> ?? ? ?? ?<!--view--> ?? ? ?? ?<s:VGroup horizontalCenter="0" verticalCenter="0"> ?? ??? ?<s:SkinnableDataContainer itemRenderer="TheFilmReelItemRenderer"> ?? ??? ??? ?<s:layout> ?? ??? ??? ??? ?<s:HorizontalLayout/> ?? ??? ??? ?</s:layout> ?? ??? ??? ? ?? ??? ??? ?<s:ArrayCollection> ?? ??? ??? ??? ?<fx:Object labeltext="北方狼" imgsource="img/huitail.gif"/> ?? ??? ??? ??? ?<fx:Object labeltext="加菲猫" imgsource="img/jiafm.gif"/> ?? ??? ??? ??? ?<fx:Object labeltext="焦虑的加菲猫" imgsource="img/kaomao.gif"/>?? ? ?? ??? ??? ?</s:ArrayCollection> ?? ??? ?</s:SkinnableDataContainer> ?? ??? ??? ? ?? ??? ?<s:Label text="行内渲染器" paddingTop="20" fontWeight="bold"/> ?? ??? ?<mx:DataGrid id="grid" dataProvider="{arrayforgrid}" width="100%" height="100"> ?? ??? ??? ?<mx:columns> ?? ??? ??? ??? ?<mx:DataGridColumn headerText="姓名"> ?? ??? ??? ??? ??? ?<mx:itemRenderer> ?? ??? ??? ??? ??? ??? ?<fx:Component> ?? ??? ??? ??? ??? ??? ??? ?<mx:Label text="{data.name}[{data.sex}]"/> ?? ??? ??? ??? ??? ??? ?</fx:Component> ?? ??? ??? ??? ??? ?</mx:itemRenderer> ?? ??? ??? ??? ?</mx:DataGridColumn> ?? ??? ??? ??? ?<mx:DataGridColumn headerText="邮箱地址" dataField="email"/> ?? ??? ??? ?</mx:columns> ?? ??? ?</mx:DataGrid> ?? ??? ? ?? ??? ?<s:Label text="混入(drop-in)项渲染器" paddingTop="20" fontWeight="bold"/> ?? ??? ?<mx:DataGrid id="imggrid" dataProvider="{arrayWithImg}" width="100%" height="260" rowHeight="75"> ?? ??? ??? ?<mx:columns> ?? ??? ??? ??? ?<mx:DataGridColumn headerText="头像" dataField="thumbnail" width="80" textAlign="center" ?? ??? ??? ??? ??? ??? ??? ??? ??? itemRenderer="mx.controls.Image"/> ?? ??? ??? ??? ?<mx:DataGridColumn headerText="姓名" dataField="name"/> ?? ??? ??? ?</mx:columns> ?? ??? ?</mx:DataGrid> ?? ?</s:VGroup> ?? ? </s:Application>