让ButtonBar显示ViewStack自定义的icon

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 xmlns:view="ddkj.eb.cms.view.*"
		 width="400" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:BorderContainer top="-1" right="-1" bottom="-1" left="-1" backgroundImage="@Embed(source='http://www.cnblogs.com/http://www.cnblogs.com/__assets/skin/default/header-bar.png')" backgroundImageFillMode="repeat">
		<s:ButtonBar dataProvider="{this.viewStack1}" top="10" height="50" skinClass="skins.CustomButtonBarSkin" horizontalCenter="0"/>
		<mx:HRule left="0" top="69" right="0" height="1"/>
		<mx:ViewStack id="viewStack1" bottom="0" right="0" top="70" left="0" backgroundColor="#FFFFFF" backgroundAlpha="0.2">
			<s:NavigatorContent width="100%" height="100%" label="列表" icon="@Embed(source='http://www.cnblogs.com/http://www.cnblogs.com/__assets/icon/main/36/list.png')">
				<view:ArticleListView width="100%" height="100%"/>
			</s:NavigatorContent>
			<s:NavigatorContent width="100%" height="100%" label="修改" icon="@Embed(source='http://www.cnblogs.com/http://www.cnblogs.com/__assets/icon/main/36/modify.png')">
				<view:ArticleModifyView width="100%" height="100%"/>
			</s:NavigatorContent>
			<s:NavigatorContent width="100%" height="100%" label="新增" icon="@Embed(source='http://www.cnblogs.com/http://www.cnblogs.com/__assets/icon/main/36/add.png')">
				<view:ArticleAddView width="100%" height="100%"/>
			</s:NavigatorContent>
		</mx:ViewStack>
	</s:BorderContainer>
</s:Group>

注意这一句skinClass="skins.CustomButtonBarSkin"

skins包下面的CustomButtonBarSkin

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:Skin name="CustomButtonBarSkin"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		alpha.disabled="0.5">
	<!-- states -->
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
	
	<fx:Metadata>
		<![CDATA[
		[HostComponent("spark.components.ButtonBar")]
		]]>
	</fx:Metadata>
	
	<fx:Declarations>
		<fx:Component id="middleButton">
			<s:ButtonBarButton skinClass="skins.CustomButtonBarButtonSkin" />
		</fx:Component>
	</fx:Declarations>
	
	<s:DataGroup id="dataGroup" width="100%" height="100%">
		<s:layout>
			<s:ButtonBarHorizontalLayout gap="-1"/>
		</s:layout>
	</s:DataGroup>
	
</s:Skin>

skins包下面的CustomButtonBarButtonSkin

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
			 xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 minWidth="21" minHeight="21"
			 alpha.disabledStates="0.5">
	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" stateGroups="overStates" />
		<s:State name="down" stateGroups="downStates" />
		<s:State name="disabled" stateGroups="disabledStates" />
		<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
		<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
		<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
		<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
	</s:states>
	
	<!-- host component -->
	<fx:Metadata>
		<![CDATA[ 
		[HostComponent("spark.components.ButtonBarButton")]
		]]>
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import spark.components.ButtonBar;
			import mx.events.FlexEvent;
			import spark.components.ButtonBarButton;
			
			protected function gr_creationComplete(evt:FlexEvent):void {
				var dataObj:Object = hostComponent.data;
				img.source = dataObj.icon;
				hostComponent.toolTip = dataObj.label;
			}
			
			/* Define the skin elements that should not be colorized. 
			For toggle button, the graphics are colorized but the label is not. */
			static private const exclusions:Array = [];
			
			override public function get colorizeExclusions():Array {return exclusions;}
		]]>
	</fx:Script>
	
	<!-- layer 1: shadow -->
	<s:Rect left="0" right="0" bottom="-1" height="1">
		<s:fill>
			<s:SolidColor color="0x000000"
						  color.downStates="0xFFFFFF"
						  alpha="0.07"
						  alpha.downStates="0.5" />
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: fill -->
	<s:Rect left="1" right="1" top="1" bottom="1">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF"
								 color.selectedUpStates="0xBBBDBD"
								 color.overStates="0xBBBDBD"
								 color.downStates="0xAAAAAA"
								 alpha="0.85" 
								 alpha.overAndSelected="1" />
				<s:GradientEntry color="0xD8D8D8"
								 color.selectedUpStates="0x9FA0A1"
								 color.over="0x9FA0A1"
								 color.overAndSelected="0x8E8F90"
								 color.downStates="0x929496"
								 alpha="0.85"
								 alpha.overAndSelected="1" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 3: fill lowlight -->
	<s:Rect left="1" right="1" bottom="1" height="9">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x000000" alpha="0.0099" />
				<s:GradientEntry color="0x000000" alpha="0.0627" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: fill highlight -->
	<s:Rect left="1" right="1" top="1" height="9">
		<s:fill>
			<s:SolidColor color="0xFFFFFF"
						  alpha="0.33"
						  alpha.selectedUpStates="0.22"
						  alpha.overStates="0.22"
						  alpha.downStates="0.12" />
		</s:fill>
	</s:Rect>
	
	<!-- layer 5: highlight stroke (all states except down) -->
	<s:Rect left="1" right="1" top="1" bottom="1"
			excludeFrom="downStates">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF"
								 alpha.overStates="0.22"
								 alpha.selectedUpStates="0.33" />
				<s:GradientEntry color="0xD8D8D8"
								 alpha.overStates="0.22"
								 alpha.selectedUpStates="0.33" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 6: highlight stroke (down state only) -->
	<s:Rect left="1" top="1" bottom="1" width="1"
			includeIn="downStates, selectedUpStates, overAndSelected">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.07" />
		</s:fill>
	</s:Rect>
	<s:Rect right="1" top="1" bottom="1" width="1"
			includeIn="downStates, selectedUpStates, overAndSelected">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.07" />
		</s:fill>
	</s:Rect>
	<s:Rect left="1" top="1" right="1" height="1"
			includeIn="downStates, selectedUpStates, overAndSelected">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.25" />
		</s:fill>
	</s:Rect>
	<s:Rect left="1" top="2" right="1" height="1"
			includeIn="downStates, selectedUpStates, overAndSelected">
		<s:fill>
			<s:SolidColor color="0x000000" alpha="0.09" />
		</s:fill>
	</s:Rect>
	
	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
	<s:Rect left="0" right="0" top="0" bottom="0"
			width="69" height="20">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000"
								 alpha="0.5625"
								 alpha.down="0.6375"
								 alpha.selectedStates="0.6375" />
				<s:GradientEntry color="0x000000" 
								 alpha="0.75"
								 alpha.down="0.85"
								 alpha.selectedStates="0.85" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 8: icon -->
	<s:Graphic id="gr"
			   creationComplete="gr_creationComplete(event);"
			   horizontalCenter="0" verticalCenter="0">
		<s:BitmapImage id="img" />
	</s:Graphic>
	
</s:SparkSkin>

代码完毕