自定義Flex皮膚 - 按鈕皮膚中的輔助按鈕

我正在爲皮膚Spark:TabBar蒙皮，但我遇到了用我的自定義皮膚用於選項卡按鈕的障礙。這裏是什麼，我試圖完成一個圖：自定義Flex皮膚 - 按鈕皮膚中的輔助按鈕

_______________________ 
|      | 
| Label   X | 
|_____________________|

所以我們有一個按鈕（我使用的是spark:ButtonBarButton組件上的自定義皮膚），有去除說一個標籤和一個輔助按鈕項目從列表中。僅當用戶將鼠標懸停在主按鈕上時才應顯示X按鈕。

我的問題是，我完全無法與X按鈕進行交互，因爲它是按鈕內的按鈕。它不響應懸停狀態，我附加到它的任何點擊處理程序不會觸發 - 而是父按鈕的點擊事件觸發。

我目前正忙於使用stopPropagation，但這不會（或者我不指望它）解決懸停狀態問題，並且正在尋找更可行的解決方案。

這裏是我的代碼的一些例子：

VerticalPillBarSkin - hostComponent：spark.components.TabBar

<s:DataGroup id="dataGroup" width="100%" height="100%" clipAndEnableScrolling="true"> <s:layout> <s:VerticalLayout paddingRight="3" gap="3"/> </s:layout> <s:itemRenderer> <fx:Component> <s:ButtonBarButton skinClass="{VerticalPillBarButtonSkin}" width="120"/> </fx:Component> </s:itemRenderer> </s:DataGroup>

VerticalPillBarButtonSkin - 注意SymbolButton是延長ButtonBase一個自定義組件。

<s:Label id="labelDisplay" color="0x000000" textAlign="left" verticalAlign="middle" horizontalCenter="0" verticalCenter="1" left="0" right="12" top="6" bottom="6" /> <s:Spacer width="100%" /> <x:SymbolButton id="removeButton" includeIn="overStates" icon="{REMOVE}" iconRollover="{REMOVE_OVER}" right="5" verticalCenter="0" click="closeHandler()" />

有沒有人知道解決此問題的好方法？我曾經使用s:ButtonBarButton以外的東西作爲VerticalPillBarButton，但這似乎不是一個可行的選擇。如果有任何其他信息可以提供，請隨時詢問。

來源

2013-10-29 Jordan Foreman

我的問題實際上是兩個相關的問題，我會在這裏回答他們。

「X」按鈕的懸停狀態被忽略

這是稍微複雜的解決方案，但要點是，我不得不創建一個自定義的itemRenderer，而不是剝皮ButtonBarButton的。

「X」按鈕單擊事件被忽略

雖然我的問題似乎讓這一主要問題，解決辦法其實很簡單。沒有@Zeus或@Josh解決方案爲我工作的原因是因爲itemrenderer皮膚中沒有down state。由於X按鈕僅設置爲懸停狀態，因此實際上它正在從點擊視圖中刪除，因此從未觸發其單擊事件。非常大的facepalm時刻。

TL; DR - Don't forget the down state!

來源

2013-10-30 19:30:18

一些建議，

我會成立於子按鈕buttonMode屬性，看看是否的作品。
此外，當用戶點擊X事件處理程序（父按鈕）時，可知道目標和當前目標，因爲用戶點擊X，目標將爲按鈕X.您可以執行If else找出要採取的動作。

來源

2013-10-29 20:56:46 Zeus

將MouseEvent.CLICK處理程序附加到輔助按鈕並呼叫event.stopImmediatePropagation()。這將阻止它進一步煽動事件。

private function secondaryClickHandler(e:MouseEvent):void { 
    e.stopImmediatePropagation(); 

    // run click code here 
}

所以基本上，點擊來自第二個按鈕，然後冒泡到主按鈕，然後觸發另一個處理程序。這將確保它不會觸發主按鈕，如果它來自第二個按鈕。

您可能還需要做到這一點，以MouseEvent.MOUSE_UP以及/而不是。我相信訂單是按下 - >上 - >點擊，但我不記得確定。

來源

2013-10-29 23:57:16

謝謝。我試過這個，但由於某種原因，我無法將一個事件監聽器附加到'creationComplete'處理程序中的按鈕 - 由於某種原因，該按鈕爲'null'。有沒有更好的時間來附加聽衆？ –

'CREATION_COMPLETE'應該是正確的，但是看着你的MXML，它看起來像你已經有一個附加的點擊處理程序（'closeHandler（）'，你只需要改變爲'closeHandler（event）'，以便事件通過作爲參數） –

由於它是一個外觀部件，因此您必須以不同的方式處理它，如果我正確理解這一點，則可能必須重寫自定義組件上的partAdded（）方法。 – Zeus

自定義Flex皮膚 - 按鈕皮膚中的輔助按鈕

回答

相關問題