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工作的日子里，我应该记住这一点。如果未使用嵌入注释，则资源被链接，因此每次更改状态时都会获取资源，即鼠标悬停和鼠标移出。

感谢您尽快回复！

鼠标悬停/鼠标移动时自定义的TabBar按钮闪烁

1 个答案: