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中仅有底部边框的选项卡

1 个答案: