Question

我正在为Spark:TabBar设置外观，但是我遇到了用于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

一些建议，

我会在子按钮上设置buttonMode属性，看看是否这很有效。
此外，当用户点击X时，事件处理程序（父按钮）可以知道目标和当前目标，因为用户点击X，目标将是按钮X.你可以做一个If else来弄清楚采取行动。

Answer 2

将MouseEvent.CLICK处理程序附加到辅助按钮并调用event.stopImmediatePropagation()。这样可以防止它再次发生冒泡事件。

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

    // run click code here
}

所以基本上，点击来自辅助按钮，然后冒泡到主按钮，然后激活另一个处理程序。如果它来自辅助按钮，这将确保它不会点击该主按钮。

您可能需要同样使用MouseEvent.MOUSE_UP。我相信订单是向下 - >向上 - >点击，但我无法确定。

Answer 3

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

'X'按钮的悬停状态被忽略

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

忽略'X'按钮点击事件

虽然我的问题似乎使这成为主要问题，但解决方案实际上非常简单。 @Zeus或@Josh解决方案都不适用于我的原因是因为itemrenderer皮肤中没有down state。由于X按钮设置为仅包含在悬停状态中，因此它实际上已从视图中删除，因此从不触发其click事件。相当大的facepalm时刻。

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

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

3 个答案: