Flex：使皮肤的一部分不可聚焦/不可点击答案

【问题标题】：Flex: make part of a skin non focusable/non-clickableFlex：使皮肤的一部分不可聚焦/不可点击
【发布时间】：2011-06-27 07:15:46
【问题描述】：

又名：如何在皮肤中设置 hitArea。

我需要使 flex 皮肤的一部分不可聚焦/不可点击，即当鼠标点击按钮的该部分时，它实际上并没有被点击。

基本上，我希望那部分是阴影、高光或背景，或者任何你喜欢的名字。它以某种方式通过阴影完成，但我希望拥有比使用过滤器更好的控制。

示例代码：

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    <s:Ellipse id="nonFocusableBackground"
        left="-20" right="-20" bottom="-20" top="-20">
        ...
    </s:Ellipse>

    <s:Rect id="focusableForeground" left="0" right="0" top="0" bottom="0">
        ...
    </s:Rect>
</s:SparkSkin>

使用此代码，我希望 ID 为 nonFocusableBackground 的部分不属于皮肤/组件的活动区域（我自己的术语）。不过目前这部分由于比其他部分大，所以点击时会点击按钮。

我使用光晕效果做了一个快速测试，结果不错，但这不是我想要的。

【问题讨论】：

标签： flash apache-flex button flex4 skin

【解决方案1】：

我不相信图形基元接受焦点。他们没有焦点事件；用户如何判断某物是焦点？你经历了什么？

您可以将 Shape 放入 UIComponent 中，然后使用 UIComponent 并将 focusEnabled 和 hasFocusableChildren 设置为 false。

【讨论】：

@jordeox 为什么这些在皮肤中的事实很重要？据我所知，图形基元不会因为您将它们放在皮肤中而突然具有接受焦点的能力。我错了吗？
是的，确实如此，因为它们是按钮组件的一部分。
@jordoex 我不确定你认为你看到了什么。我正在查看 Spark Button 代码，但没有看到图形基元可以接受焦点的证据。 Spark Button 扩展 UIComponent 并且该按钮可以接受焦点和鼠标移动。 Spark Button 皮肤中的图形没有。它们会根据皮肤状态进行更改，皮肤状态会因鼠标事件而修改。
我的意思是命中区域而不是真正的焦点，因为当我第一次问这个问题时，我不知道如何称呼命中区域。因为它们是按钮的一部分，所以它们是按钮焦点的一部分。这就是正在发生的事情。

【解决方案2】：

我不知道这是否是最简单的方法。我真的很想有办法直接在 mxml 中完成所有这些操作。

我现在是这样解决的：

在皮肤声明中：

creationComplete="setHitArea(event)"

在脚本中：

protected function setHitArea(event:FlexEvent):void
    {
        this.clickGroup.mouseEnabled = false;
        this.hitArea = this.clickGroup;
        this.hostComponent.hitArea = this.clickGroup;
    }

休息：

<s:Group id="clickGroup" left="0" right="0" top="0" bottom="0">
    <s:Rect id="focusableForeground" left="0" right="0" top="0" bottom="0">
    ...
    </s:Rect>
</s:Group>

【讨论】：