关于 apache flex：自定义 TabBar 按钮在 mouseover/mouseout 上闪烁

customized TabBar buttons flickering on mouseover/mouseout

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

以下是我的皮肤 MXML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<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>

<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>


<s:BitmapImage source.selectedStates="images/btn_left.png"
top="0" bottom="0" left="0"
width="6"/>

<s:Group>

<s:BitmapImage source.selectedStates="images/btn_bg.png"
fillMode="repeat"
left="0" right="0"/>


<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>

<s:BitmapImage source.selectedStates="images/btn_right.png"
top="0" bottom="0" right="0"
width="6"/>
</s:Group>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<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 具有以下代码段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<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>


<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>

我尝试将整个块package在一个组标签中，但无济于事。不可见的 Rect 确实修复了当鼠标悬停在按钮的任何边缘时发生的"机枪"闪烁，但是每次鼠标进入和离开每个按钮时仍然存在闪烁。