dataGroup Example

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Spark DataGroup component -->
<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/halo" xmlns:mx1="library://ns.adobe.com/flex/mx">
	
	<fx:Script>
		<![CDATA[
			// need to import the item renderers
			import spark.skins.spark.DefaultItemRenderer;
			import spark.skins.spark.DefaultComplexItemRenderer;
			import spark.components.Button;
			
			public function customItemRendererFunction(item:*):IFactory {
				if (item is Button) {
					return new ClassFactory(DefaultComplexItemRenderer);
				} else {
					return new ClassFactory(DefaultItemRenderer);
				}
			}
		]]>
	</fx:Script>
	
	<s:Panel title="DataGroup Component Example"
			 width="75%" height="75%" 
			 horizontalCenter="0" verticalCenter="0">
		<s:VGroup left="10" right="10" top="10" bottom="10">
			<!-- A DataGroup can hold primitive data items if an 
			item renderer is defined. -->
			<s:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer">
				<s:layout>
					<s:VerticalLayout gap="1" />
				</s:layout>
				<s:dataProvider>
					<s:ArrayCollection>
						<fx:String>primitive data 1</fx:String>
						<fx:String>primitive data 2</fx:String>
						<fx:String>primitive data 3</fx:String>
					</s:ArrayCollection>
				</s:dataProvider>
			</s:DataGroup>
			
			<mx1:Spacer height="20" />
			
			<!-- An item renderer function can be defined in order to display 
			a mix of data and graphical items. -->
			<s:DataGroup itemRendererFunction="customItemRendererFunction">
				<s:layout>
					<s:HorizontalLayout gap="1" />
				</s:layout>
				<s:dataProvider>
					<s:ArrayCollection>
						<s:Button label="Button 1" />
						<fx:String>primitive data string</fx:String>
						<s:Button label="Button 2" />
					</s:ArrayCollection>
				</s:dataProvider>
			</s:DataGroup>
		</s:VGroup>
	</s:Panel>
	
	<fx:Declarations>
		<s:SolidColor id="fillColor" color="#fff000"/>
	</fx:Declarations>
	
	<s:DataGroup itemRenderer="PersonItemRenderer">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:Object firstName="Alain" lastName="Hufkens"/>
				<fx:Object firstName="Hugh" lastName="Hefner"/>
				<fx:Object firstName="Jimi" lastName="Hendrix"/>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:DataGroup>
	
</s:Application>

PersonItemRenderer.mxml

<?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/halo">
	
	<fx:Declarations>
		<s:SolidColor id="normalColor" color="#000000"/>
		<s:SolidColor id="hoveredColor" color="#FF0000"/>
	</fx:Declarations>
	
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
	</s:states>
	
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	
	<s:Ellipse fill="{normalColor}" fill.hovered="{hoveredColor}" 
			   width="10" height="10" />
	<s:RichText text="{data.firstName} {data.lastName}" 
				  color.hovered="#FF0000"/>
	
</s:ItemRenderer>

参考 http://www.hufkens.net/