自定義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按鈕在鼠標懸停/鼠標懸停時閃爍

回答

相關問題