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

我在Flex的TabBar上使用自定义外观，特别是控件ButtonBarButton的外观。按钮的宽度取决于其包含的文本是可变大小，并且按钮的背景是仅在按钮的选定状态中显示的图像。自定义TabBar按钮在鼠标悬停/鼠标悬停时闪烁

下面是我的皮肤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>

我试图在一组环绕整个块标签，但无济于事。不可见的Rect的确确定了当鼠标悬停在按钮的任何边缘时发生的“机枪”闪烁，但每个按钮的每个鼠标输入和鼠标离开仍然闪烁。

来源

2011-05-24 yovetichg

还有没有更多的代码？在这里发布的代码应该工作正常，没有闪烁，除非有别的东西在状态之间跳动。你展现的越好。 – 2011-05-24 21:21:43

如果将所有内容都包含在顶级组中，会发生什么？我注意到你有一个关于闪烁的评论，但是如果我没有错误地认为Rect需要在一个组中“可以”。我对这些机制并不十分确定，但我已经在几种默认皮肤中看到它的完成。 – drkstr 2011-05-24 23:38:53

想通了：

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

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

我应该记得在我在Flash工作的日子里。如果未使用嵌入注释，则资源被链接，因此每次更改状态（即鼠标悬停和鼠标移出）时都会提取资源。

感谢您的快速回复！

来源

2011-05-25 16:23:33 yovetichg

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

回答

相关问题