0

有没有办法设置 TabBar 的选定选项卡，使其包含渐变背景颜色？我会认为组合fillColors和fillAplhas将是要使用的样式，但这会设置其他未选择的选项卡背景颜色，正如您在运行下面的代码时所看到的那样。

目标是让最终用户选择所选选项卡实例的背景颜色（例如使用 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>
4

1 回答 1

0

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" />
于 2012-09-27T05:11:01.887 回答