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

我想添加一个取消图标到我的TabBarButtons在Flex 4.0（火花），我已经接近，但现在我坚持让图标为“可点击”Flex Spark：如何在TabBar按钮上添加取消按钮？

我见过其他方法，如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），但无法使其正常工作。

任何想法！

亲切的问候， =戴维

来源

2010-08-19 Dave Meurer

不closeEmployeeButtonClicked（）曾经被调用？ – 2010-08-19 21:46:11

好问题 - 它没有被调用。当图像被点击时，整个标签按钮被压下。所以，这几乎就像按钮边界内的任何东西都不能被“点击”。我也尝试删除按钮外观中的所有阴影和边框，但没有成功让图形区域看到点击。感谢您的帮助！ – 2010-08-20 13:28:56

而不是图形/位图图像，我还尝试了一个带自定义皮肤的按钮，呈现图标：但它表现得一样...把这两个关闭按钮放在按钮父容器之外工作正常 – 2010-08-20 13:35:27

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

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

，这里是它的项目主页：

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

来源

2010-08-19 21:25:54 2DH

好主意，但SuperTabNavigator基于mx（Flex 3）组件。这个问题是特定于Flex 4 Spark组件和皮肤的。 – 2010-08-19 21:48:55

哦，是的，你说得对。对不起。我在我的Flex 3项目中使用这个库，并注意到还有Flex 4版本，所以我认为他们重写了Flex 4的所有内容。哦天真我;）无论如何，戴夫仍然可以用它作为一个例子解决可能出现的一些问题。 – 2DH 2010-08-20 07:37:46

是的，好主意，谢谢！我会看看SuperTabNavigator是如何构建的。我也试图远离第三方组件，看看它是否可以使用Flex 4中的皮肤完成。谢谢！ – 2010-08-20 13:30:15

我看到后是很老，但我只是沿着同样的问题来了。为了使按钮可点击，您需要在TabBarButtonSkin中启用mouseChildren。你可以这样做：

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

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

来源

2012-07-15 23:49:14

这里，似乎是非常出色地完成一个Flex 4基于标签控制，完整的源代码包括：

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

来源

2013-05-02 22:35:49

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

回答

相关问题