Flex Spark：如何在 TabBar 按钮上添加取消按钮？答案

【问题标题】：Flex Spark: How to add a Cancel button on the TabBar Button?Flex Spark：如何在 TabBar 按钮上添加取消按钮？
【发布时间】：2011-04-01 08:52:42
【问题描述】：

我正在尝试在 Flex 4.0 (Spark) 中向我的 TabBarButtons 添加一个取消图标，我已经接近了，但现在我坚持让图标“可点击”

我见过其他方法，例如 FlexWiz 博客 (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），但无法让它工作。

任何想法！

亲切的问候， =戴夫

【问题讨论】：

closeEmployeeButtonClicked() 是否被调用过？
好问题 - 它没有被调用。单击图像时，整个选项卡按钮都会按下。因此，几乎就像按钮边界内的任何东西都不能“可点击”一样。我还尝试删除 Button 皮肤中的所有阴影和边框，但没有成功让图形区域看到点击。感谢您的帮助！
代替图形/位图图像，我还尝试了一个带有自定义外观的按钮，该外观呈现一个图标：但是它的行为是一样的......把这两个关闭按钮放在按钮父容器之外工作正常

标签： apache-flex button flex4 tabs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

这是它的项目主页：

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

【讨论】：

好主意，但 SuperTabNavigator 基于 mx (Flex 3) 组件。这个问题是针对 Flex 4 spark 组件和皮肤的。
哦，是的，你是对的。对此感到抱歉。我在我的 Flex 3 项目中使用这个库，并注意到还有 Flex 4 版本，所以我认为他们为 Flex 4 重写了所有内容。哦，天真我;）无论如何，戴夫仍然可以用它作为他如何做的例子解决一些可能出现的问题。
是的，好主意，谢谢！我将看看 SuperTabNavigator 是如何构建的。我也试图远离 3rd 方组件，看看是否可以仅使用 Flex 4 中的皮肤来完成。谢谢！

【解决方案3】：

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

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

【讨论】：