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

【问题标题】：Custom Flex Skin - Secondary button within button skin自定义 Flex 皮肤 - 按钮皮肤中的辅助按钮
【发布时间】：2013-10-29 19:28:37
【问题描述】：

我正在为Spark:TabBar 设置皮肤，但我的自定义皮肤用于标签栏按钮时遇到了障碍。这是我想要完成的图表：

_______________________
|                     |
|  Label            X |
|_____________________|

所以我们有一个按钮（我在spark:ButtonBarButton 组件上使用自定义皮肤），它有一个标签和一个辅助按钮，用于从列表中删除所述项目。 X 按钮应仅在用户将鼠标悬停在主按钮上时显示。

我遇到的问题是我完全无法与X 按钮交互，因为它是按钮中的一个按钮。它不响应悬停状态，并且我附加到它的任何点击处理程序都不会触发 - 而是触发父按钮的点击事件。

我目前正在尝试使用stopPropagation，但这不会（或者说我不希望它）解决悬停状态问题，并且正在寻找更可行的解决方案。

以下是我的一些代码示例：

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

【问题讨论】：

标签： apache-flex mxml flex-spark

【解决方案1】：

一些建议，

我会在子按钮上设置 buttonMode 属性，看看是否行得通。
此外，当用户点击 X 时，事件处理程序（父按钮）可以知道目标和当前目标，因为用户点击了 X，目标将是按钮 X。您可以执行 If else 来找出采取的行动。

【讨论】：

【解决方案2】：

将MouseEvent.CLICK 处理程序附加到辅助按钮并调用event.stopImmediatePropagation()。这将防止它进一步触发冒泡事件。

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

    // run click code here
}

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

您可能还需要/改为对MouseEvent.MOUSE_UP 执行此操作。我相信顺序是向下->向上->点击，但我不记得了。

【讨论】：

谢谢。我已经尝试过了，但由于某种原因，我无法将事件侦听器附加到 creationComplete 处理程序中的按钮 - 由于某种原因，按钮是 null。有没有更好的时间来附加监听器？
CREATION_COMPLETE 应该是正确的，但是查看您的 MXML，看起来您已经附加了一个点击处理程序（closeHandler()，您只需将其更改为 closeHandler(event) 以便事件作为参数传递）
因为它是一个皮肤部件，你必须以不同的方式处理它，如果我理解正确的话，你可能必须覆盖 customcomponent 上的 partAdded() 方法。
@JoshJanusch - 是的。今天早上我意识到了这一点。
@Zeus - 谢谢....这是有道理的不幸的是，这些解决方案似乎不起作用，也没有解决悬停状态问题。我会再玩弄这个，我一定会陈述我的发现

【解决方案3】：

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

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

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

“X”按钮点击事件被忽略

虽然我的问题似乎将此作为主要问题，但解决方案实际上非常简单。 @Zeus 或 @Josh 解决方案都不适合我的原因是因为 itemrenderer 皮肤中没有 down state。因为X 按钮被设置为仅包含在悬停状态中，所以它实际上是从视图中删除onclick，因此永远不会触发它的点击事件。大脸的瞬间。

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

【讨论】：