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:"[e-mail]"},
                {name:"楚源", sex: "男", email:"[e-mail]"}
            ]);
            
            [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>