Flex 4 中只有底部边框的选项卡

Question

我想设置如上所示的标签样式。可以在 flex 中做吗？

请帮帮我。提前致谢。

如果您能帮我提供相同的示例代码，那就太好了。

Answer 1

您必须提供自定义标签按钮皮肤，并从自定义标签栏皮肤中引用它。这是一些示例代码：

<s:TabBar skinClass="MyTabBarSkin">
    <s:dataProvider>
        <s:ArrayCollection>
            <fx:String>Home</fx:String>
            <fx:String>Contact us</fx:String>
            <fx:String>About us</fx:String>
        </s:ArrayCollection>
    </s:dataProvider>
</s:TabBar>

MyTabBarSkin.as：您只需获取 spark.skins.spark.TabBarSkin 的 TabBar 代码并在项目渲染器中引用您的 TabBarButtonSkin。

<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="-1"/>
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <s:ButtonBarButton skinClass="MyTabBarButtonSkin"/>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

MyTabBarButton.as:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   alpha.disabled="0.5">

    <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:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             fontSize="16"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="7">
    </s:Label>

    <s:Line includeIn="selectedStates" left="2" right="2" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="#5b36ff" weight="4" caps="round"/>
        </s:stroke>
    </s:Line>
</s:SparkButtonSkin>

Sample

Flex 4 中只有底部边框的选项卡

Tab with only bottom border in Flex 4

apache-flex

flex4

flex4.5