Flex TabNavigator 的样式按钮答案

【问题标题】：Styling buttons of Flex TabNavigatorFlex TabNavigator 的样式按钮
【发布时间】：2011-02-22 18:49:32
【问题描述】：

我创建了一个TabNavigator，里面有一堆NavigatorContent，并且只想为标签本身的按钮设置皮肤。所以我添加了一个skinClass，但看起来在文档中，没有专门针对按钮的皮肤部分。

我是否必须设置 mx:TabNavigator 本身的样式才能完成此操作？我希望不是，因为我不知道如何设置 mx 组件的样式，并且更喜欢设置 spark 的样式。

还有其他我没有想到的替代方案吗？

【问题讨论】：

标签： apache-flex actionscript-3 adobe viewstack tabnavigator

【解决方案1】：

由于 TabNavigator 是一个 mx 组件，因此您必须以旧方式对其进行样式设置。您可以通过设置“tabStyleName”样式来设置按钮样式，即：

TabNavigator{
   tabStyleName: "myTabButton";
}

.myTabButton{
   skin: ClassReference("com.yournamespace.skins.TabButtonSkin");
}

您必须以旧方式创建皮肤，您可能希望查看 mx.skins.halo.Button 类作为示例，或者您可以使用 degrafa 或使用 pngs。

请注意，如果您愿意，也可以单独设置 firstTabStyleName 或 lastTabStyleName。

程序化皮肤示例： http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

degrafa 示例： http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/

【讨论】：

【解决方案2】：

您可以编写自己的按钮皮肤或使用这里的http://www.wabysabi.com/flex/enhancedbuttonskin/ 命名为 EnhancedButtonSkin.as（右键单击，查看源代码）。然后声明您的 TabNavigator 组件并指定其 tabStyleName。

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab">

现在是 css：

 <fx:Style>
  .tab
  {
   upSkin:ClassReference('com.EnhancedButtonSkin');
   overSkin:ClassReference('com.EnhancedButtonSkin');
   downSkin:ClassReference('com.EnhancedButtonSkin');
   disabledSkin:ClassReference('com.EnhancedButtonSkin');
   selectedUpSkin:ClassReference('com.EnhancedButtonSkin');
   selectedOverSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDownSkin:ClassReference('com.EnhancedButtonSkin');
   selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin');

   cornerRadii: 5, 5, 0, 0;
   borderColors: #CC0000, #000000;
   overBorderColors: #003399, #003399;
   selectedBorderColors: #666666, #FFFFFF;
   borderThickness: 1;
   borderAlpha: 1;
   fillColors: #CC3300, #F98900;
   fillAlphas: 1, 1;
   fillColorRatios: 0, 255;
   overFillColors: #999999, #FFFFFF;
   overFillAlphas: 1, 1;
   overFillColorRatios: 0, 255;
   selectedFillColors: #999999, #FFFFFF;
   selectedFillAlphas: 1, 1;
   selectedFillColorRatios: 111, 255;
   highlightAlphas: 0, 0;
   color: #000000;
   textRollOverColor: #000000;
   fontSize: 13;
  }
 </fx:Style>

这个 css 将显示： i.imgur.com/4HwD3.png

雷米

【讨论】：