自定义Flex皮肤 - 按钮皮肤中的辅助按钮

Question

我正在为皮肤Spark:TabBar蒙皮，但我遇到了用我的自定义皮肤用于选项卡按钮的障碍。这里是什么，我试图完成一个图：

_______________________ 
|      | 
| 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，但这似乎不是一个可行的选择。如果有任何其他信息可以提供，请随时询问。

Answer 1

我的问题实际上是两个相关的问题，我会在这里回答他们。

1. “X”按钮的悬停状态被忽略

这是稍微复杂的解决方案，但要点是，我不得不创建一个自定义的itemRenderer，而不是剥皮ButtonBarButton的。

1. “X”按钮单击事件被忽略

虽然我的问题似乎让这一主要问题，解决办法其实很简单。没有@Zeus或@Josh解决方案为我工作的原因是因为itemrenderer皮肤中没有down state。由于X按钮仅设置为悬停状态，因此实际上它正在从点击视图中删除，因此从未触发其单击事件。非常大的facepalm时刻。

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

Answer 2

一些建议，

• 我会成立于子按钮buttonMode属性，看看是否 的作品。
• 此外，当用户点击X事件处理程序（父按钮）时， 可知道目标和当前目标，因为用户点击X，目标将为按钮X.您可以执行If else找出要采取的动作 。

Answer 3

将MouseEvent.CLICK处理程序附加到辅助按钮并呼叫event.stopImmediatePropagation()。这将阻止它进一步煽动事件。

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

    // run click code here 
} 

所以基本上，点击来自第二个按钮，然后冒泡到主按钮，然后触发另一个处理程序。这将确保它不会触发主按钮，如果它来自第二个按钮。

您可能还需要做到这一点，以MouseEvent.MOUSE_UP以及/而不是。我相信订单是按下 - >上 - >点击，但我不记得确定。