让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>

代码完毕