自定义 TabBar 按钮在鼠标悬停/鼠标悬停时闪烁

Question

我在 Flex 的 TabBar 上使用自定义皮肤，特别是控件 ButtonBarButton 的皮肤。按钮的宽度是可变大小，具体取决于其包含的文本，按钮的背景是仅在按钮的选定状态下显示的图像。

以下是我的皮肤 MXML：

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" stateGroups="overStates" />
    <s:State name="down" stateGroups="downStates" />
    <s:State name="disabled" stateGroups="disabledStates" />
    <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- invisible background to prevent "machine gun" flickering on edge of button -->
<s:Rect top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:SolidColor color="0xFFFFFF"
                      alpha="0.0"/>
    </s:fill>
</s:Rect>
<s:Group>
    <s:layout>
        <s:HorizontalLayout gap="0"/>
    </s:layout>

    <!-- left edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_left.png"
                   top="0" bottom="0" left="0"
                   width="6"/>
    <!-- background and text of button -->
    <s:Group>
        <!-- layer 1: image -->
        <s:BitmapImage source.selectedStates="images/btn_bg.png"
                       fillMode="repeat"
                       left="0" right="0"/>
        <!-- layer 2: text -->
        <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
        <s:Label id="labelDisplay"
                 textAlign="center"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 horizontalCenter="0" verticalCenter="1"
                 left="10" right="10" top="2" bottom="2">
        </s:Label>
    </s:Group>
    <!-- right edge of button -->
    <s:BitmapImage source.selectedStates="images/btn_right.png"
                   top="0" bottom="0" right="0"
                   width="6"/>
</s:Group>

按钮在鼠标悬停和鼠标移出时闪烁。有谁知道我是否缺少此类按钮的状态，或者我是否错误地应用了按钮的来源？

至于更多代码，TabBar 组件的布局如下：

<s:Group>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Label text="Title:"/>
        <s:Label text="Sign in"/>

    </s:Group>
    <s:TabBar dataProvider="{navigationList}"
              chromeColor="#FFFFFF"
              skinClass="skins.NavigationBarSkin"/>
</s:Group>

重写的 TabBarSkin 具有以下代码片段：

<!-- layer 1 background -->
<s:Rect id="backgroundFill" topLeftRadiusX="4" topRightRadiusX="4" top="0" bottom="0" left="0" right="0">
    <s:fill>
        <s:LinearGradient>
            <s:GradientEntry color="0x625454"/>
            <s:GradientEntry color="0x3F3536"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" 
             top="10" left="15" right="15" bottom="0">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="10" />
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ButtonBarButton skinClass="skins.NavigationBarButtonSkin" />
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

我尝试将整个块包装在 Group 标记中，但无济于事。不可见的 Rect 确实修复了鼠标悬停在按钮任何边缘时发生的“机关枪”闪烁，但每个按钮的每次鼠标进入和鼠标离开时仍然存在闪烁。

Answer 1

想通了：

关键是通过@Embed方法设置BitmapImage的来源。

<s:BitmapImage source.selectedStates="@Embed('images/btn_left.png')"/>

我在 Flash 工作期间就应该记住这一点。如果未使用 Embed 注释，则资源会被链接，因此每次状态更改（即鼠标悬停和鼠标移出）时都会获取该资源。

不过还是感谢您的快速回复！