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按鈕上添加取消按鈕？

回答

相關問題