1     flex4 API中的togglebuttonbar定义：

          ToggleButtonBar 控件定义一组水平或垂直按钮，这些按钮保持其选中或取消选中状态。在 ToggleButtonBar 控件中，只有一个按钮可以处于选中状态。这就意味着，当用户在 ToggleButtonBar 控件中选择一个按钮后，该按钮将保持选中状态直到用户选择其他按钮。

           要控制 ToggleButtonBar 控件的按钮样式，请使用ButtonStyleName、firstButtonStyleName 、lastButtonStyleName和 样式属性；请勿尝试设置 ToggleButtonBar 控件中单个 Button 控件的样式。

2     ToggleButtonBar实现的导航

          1  Work.mxml文件：


  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <local:WorkAS xmlns:fx="http://ns.adobe.com/mxml/2009"   
  3.               xmlns:s="library://ns.adobe.com/flex/spark"   
  4.               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="400" height="300"> 
  5.     <fx:Declarations> 
  6.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  7.     </fx:Declarations> 
  8.     <fx:Style source="css/style.css"/> 
  9.     <mx:VBox verticalCenter="0" horizontalCenter="0"> 
  10.         <mx:HBox> 
  11.             <mx:ToggleButtonBar dataProvider="viewstack"  buttonStyleName="toggleButtonBarButtonSkin"   
  12.                                 firstButtonStyleName="toggleButtonBarButtonSkin" lastButtonStyleName="toggleButtonBarButtonSkin"/> 
  13.         </mx:HBox> 
  14.     <mx:ViewStack id="viewstack"> 
  15.         <mx:VBox id="new1" label="第一页"> 
  16.             <s:Button label="1111"/> 
  17.         </mx:VBox> 
  18.         <mx:VBox id="new2"  label="第二页"> 
  19.             <s:Button label="2222"/> 
  20.         </mx:VBox> 
  21.         <mx:VBox id="new3"  label="第三页"> 
  22.             <s:Button label="3333"/> 
  23.         </mx:VBox> 
  24.         <mx:VBox id="new4"  label="第四页"> 
  25.             <s:Button label="4444"/> 
  26.         </mx:VBox> 
  27.     </mx:ViewStack> 
  28.             </mx:VBox> 
  29. </local:WorkAS> 
 
  
         2    style.css文件：
 
  
 
 
  

  
  1. .toggleButtonBarButtonBar{  
  2.     upSkin:Embed(source="assets/btnup.png");  
  3.     overSkin:Embed(source="assets/btndown.png");  
  4.     downSkin:Embed(source="assets/btnup.png");  
  5.     focusSkin:Embed(source="assets/btnup.png");  
  6.     disabledSkin:Embed(source="assets/btnup.png");  
  7.     selectedUpSkin:Embed(source="assets/btndown.png");  
  8.     selectedDownSkin:Embed(source="assets/btndown.png");  
  9.     selectedOverSkin:Embed(source="assets/btnup.png");  
  10.     selectedDisabledSkin:Embed(source="assets/btndown.png");  
  11. } 
 
  
实现效果：
 
  
 
 
  
 
 
  
 
  
就是对togglebuttonbar的Button 赋了各个转状态的皮肤。学习ING