Flex4 TabBar 蒙皮答案

【问题标题】：Flex4 TabBar skinningFlex4 TabBar 蒙皮
【发布时间】：2011-04-10 04:03:49
【问题描述】：

我正在尝试为 TabBar 和 NavigatorContent 设置外观。

Please see image for explanation - 所有选项卡都是透明的（alpha 0.6）及其边框。

如何从所选 buttonTab 下的 NavigatorContent 中删除顶部边框？

【问题讨论】：

标签： apache-flex flex4 tabbar skinning

【解决方案1】：

它必须是怎样的：

尝试使用 BlendMode.ERASE：

应用代码：

...  
<s:SkinnableContainer blendMode="layer" ... skinClass="skins.TabBorder">
    <mx:ViewStack ...>
        <s:NavigatorContent label="Search" skinClass="skins.TabSkin" /> 
        <s:NavigatorContent label="Customer Info" skinClass="skins.TabSkin" /> 
    </mx:ViewStack>
    <s:TabBar dataProvider="{myViewStack}"  ... />
</s:SkinnableContainer>
...

skins.TabBorder：

<s:Rect left="0" right="0" top="25" bottom="0" radiusX="6" topLeftRadiusX="0">
    <s:stroke>
        <s:SolidColorStroke color="#ffffff" alpha="0.3" />
    </s:stroke>
</s:Rect>

skins.TabBarButtunSkin：

<!-- its black rect which clears all under -->
<s:Rect blendMode="erase" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">
    <s:fill>
        <s:SolidColor color="#000000" />
    </s:fill>
</s:Rect>

也许有更简单的方法？

【讨论】：

我认为您已经使用了更简单的方法，因为所有其他方法都会更难，并且在设计/视图逻辑中不是很好的解决方案。

【解决方案2】：

<... borderSides=”left bottom right” borderStyle=”solid” borderThickness=”1″ ...>

你也可以写自己的皮肤

或扩展组件本身

【讨论】：

在这种情况下，边框将从顶部移除。但我需要删除所选按钮下方的边框。
仅在选中状态下应用此样式。你熟悉州吗？
是的，我知道状态。我试图使用建议，但是......请参阅下一篇文章的解释。