1

我想要像单个按钮一样的标签，每个按钮之间有一些间距。它应该像普通的选项卡导航器选项卡一样工作。

因此，我使用了一个 Spark ButtonBar 组件，并对 ButtonBarSkin 进行了更改，使其看起来像我上面所说的那样。ButtonBar 的默认行为是 ButtonBar 控件中只有一个按钮可以处于选中状态。这意味着当您在 ButtonBar 控件中选择一个按钮时，该按钮将保持选中状态，直到您选择另一个按钮。

但是，如果我点击已经选择的按钮，选择就会消失。我不需要这样的行为。我希望按钮处于选定状态，即使我再次单击它，就像在标签栏控件中一样。

当我探索按钮栏皮肤时，我知道按钮栏按钮被用于定义按钮栏控件的自定义项目渲染器。ButtonBarButton 组件有一个“ allowDeselection ”属性，默认为true，这意味着可以通过再次单击取消选择按钮栏中的选定按钮。如果设置为 false，用户必须选择不同的按钮来取消选择当前选择的按钮。

因此，在 ButtonBarSkin 中声明 buttonbarbutton 组件时，我将allowDeselection属性设置为 false。即使那样，该值也被设置为true。在调试代码时，我发现奇怪的是，首先设置了声明的值，即false，然后再次将按钮栏的所有 firstbutton、middlebutton 和 lastbutton 设置为 true。我不知道该属性是如何设置为 true 的，即使我在 buttonbarskin 中定义时将其设置为 false。

代码片段如下：

按钮栏控件

   <s:ButtonBar skinClass="skin.ButtonBarSkinCopy">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:ButtonBar>

ButtonBarSkinCopy.mxml

<?xml version="1.0" encoding="utf-8"?>


<fx:Metadata>
<![CDATA[ 
   /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata> 

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- 
        @copy spark.components.ButtonBar#firstButton
        @default spark.skins.spark.ButtonBarFirstButtonSkin
        @see spark.skins.spark.ButtonBarFirstButtonSkin
    -->
    <fx:Component id="firstButton">
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin" />
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#middleButton
        @default spark.skins.spark.ButtonBarMiddleButtonSkin
        @see spark.skins.spark.ButtonBarMiddleButtonSkin
    -->
    <fx:Component id="middleButton" >
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin" />
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#lastButton
        @default spark.skins.spark.ButtonBarLastButtonSkin
        @see spark.skins.spark.ButtonBarLastButtonSkin
    -->
    <fx:Component id="lastButton" >
        <s:ButtonBarButton allowDeselection="false" skinClass="skin.CustomButtonBarButtonSkin"/>
    </fx:Component>

</fx:Declarations>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="2"/>
    </s:layout>
</s:DataGroup>

而CustomButtonBarButtonSkin.mxml 只是ButtonBarButtonSkin 的一个副本。ButtonBarButtonSkin.mxml 中没有进行任何更改。

请分享您的观点。

4

1 回答 1

1

您需要将组件的requireSelection属性设置ButtonBar为true. 为 true时requireSelection，无法取消选择按钮栏上的按钮。从文档中：

如果为 true，则必须始终在控件中选择数据项。如果值为 true，则 selectedIndex 属性始终设置为介于 0 和 (dataProvider.length - 1) 之间的值。

大多数子类的默认值为 false，TabBar 除外。在这种情况下，默认值为 true。

默认值为假。

您可以在此示例中看到它的工作原理（向下滚动以查看演示）。

于 2013-04-13T18:42:30.383 回答