Flex 3：如何设置 *selected* Tabbar 选项卡实例的渐变背景颜色？

Question

有没有办法设置 TabBar 的 selected 选项卡，使其包含渐变背景色？我原以为结合fillColors 和fillAplhas 将是要使用的样式，但这会设置其他 non selected 选项卡背景颜色，如果您运行下面的代码，您可以看到。

目标是让最终用户选择所选选项卡实例的背景颜色（例如使用 ColorPicker）。我想对这种颜色应用一些渐变效果。

任何帮助都将不胜感激，因为我一直在努力让它工作太久。我在谷歌上无休止地搜索了这个，但仍然找不到有效的解决方案。

private function updateTabColor():void {        
    var selectedTabIndex : int = tabBar.selectedIndex;        
    var tab:Tab = Tab(tabBar.getChildAt(selectedTabIndex));

    /* this works but not on the selected tab */
    tab.setStyle("fillColors", ["#000000", "000000"]);
    tab.setStyle("fillAlphas", [1.0, 0.4]);

    /* when not commented and as expected, tab is red */ 
    //tab.setStyle("backgroundColor", "red");

    /* when not commented, doesn't work as it appears it's deprecated in 3.0 */
    //tab.setStyle("selectedFillColors", "red");   
}

<mx:TabBar id="tabBar" dataProvider="viewStack" width="100%" itemClick="{updateTabColor()}"/>
<mx:ViewStack id="viewStack"  width="100%" height="100%">
  <mx:Box id="tab1" label="tab1" width="100%" height="100%"/>
  <mx:Box id="tab2" label="tab2" width="100%" height="100%"/>
  <mx:Box id="tab3" label="tab3" width="100%" height="100%"/>
</mx:ViewStack>

Answer 1

http://userflex.wordpress.com/2008/02/14/skin-tabnavigator-tabs/

^ 描述了使用选项卡的外观而不是使用提供的样式

这里复制历史

CSS

.tab
{
     up-skin: ClassReference("TabSkin");
     down-skin: ClassReference("TabSkin");
     over-skin: ClassReference("TabSkin");
     selected-up-skin: ClassReference("SelectedTabSkin");
     selected-down-skin: ClassReference("SelectedTabSkin");
     selected-over-skin: ClassReference("SelectedTabSkin");

     background-color: #FFFFFF;

     font-weight: normal;
     color: #000000;
     text-roll-over-color: #000000;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

.selectedTab
{
     background-color: #000000;

     font-weight: bold;
     color: #FFFFFF;
     text-roll-over-color: #FFFFFF;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

AS3

package
{
     import mx.containers.Canvas;

     public class TabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "tab";

             super.updateDisplayList (w, h);
         }
     }
}

package
{
     import mx.containers.Canvas;

     public class SelectedTabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "selectedTab";

             super.updateDisplayList (w, h);
         }

     }
}

MXML

<mx:TabNavigator id="tabs"
    tabStyleName="tab" selectedTabTextStyleName="selectedTab" />