Question

我正在尝试向Flex 4.0（Spark）中的TabBarButtons添加取消图标，我已经接近了，但现在我仍然坚持让图标变为“可点击”

我见过其他方法，比如FlexWiz Blog（http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/），但我希望找到更清洁的东西。

使用Tour de Flex sample on Tabbed Navigation中的类似方法，到目前为止我的皮肤就是这样：

<s:HGroup top="5" right="5" left="5" verticalAlign="middle">        
        <s:Label id="labelDisplay"
                 textAlign="left"
                 maxDisplayedLines="1"
                 top="10"
                 width="100%">
        </s:Label>      

        <s:Graphic x="16" y="16" 
                   buttonMode="true" 
                   mouseEnabledWhereTransparent="false" 
                   useHandCursor="true"  
                   click="closeEmployeeButtonClicked()"
                   color="0x00FF00">
            <s:BitmapImage source="@Embed('assets/images/icons/close.png')"                            
                           height="16" width="16" fillMode="scale"/>
        </s:Graphic>
</s:HGroup>

图标显示在标签中，但我无法点击它。我也尝试了一个按钮，它几乎就像父按钮容器不允许孩子可点击。我确实玩过一些父属性（比如super.mouseChildren），但无法让它工作。

任何想法！

亲切的问候，戴夫=

Answer 1

我看到帖子很老了，但我刚刚遇到了同样的问题。要使按钮可单击，您需要在TabBarButtonSkin上启用mouseChildren。你可以这样做：

override protected function commitProperties():void
{
    super.commitProperties();
    hostComponent.mouseChildren = true;
}

现在您的按钮应该是可点击的。至少它对我有用。

Answer 2

已经在flexlib库中完成了。你可以在这里找到一些例子：

http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf

这是它的项目主页：

http://code.google.com/p/flexlib/

Answer 3

这是一个基于Flex 4的选项卡控件，看起来做得很好，包括完整的源代码：

http://saturnboy.com/2010/08/terrifictabbar-custom-component/

Flex Spark：如何在TabBar按钮上添加“取消”按钮？

3 个答案: