在自定义togglebuttonbar中创建多行标签

Question

我有一个自定义的toggleButtonBar类，允许在按钮上放置标签，但是，我希望标签是多行的。我不擅长扩展默认组件。有没有人可以帮助我？

package com.vit2print.plugin.transvit.tools
{
    import mx.controls.Button;
    import mx.controls.ToggleButtonBar;
    import mx.core.IFlexDisplayObject;

    public class IconToggleButtonBar extends ToggleButtonBar
    {
        [Inspectable(enumeration="left,right,top,bottom", defaultValue="left")]
        public var labelPlacement:String = "left";

        override protected function createNavItem(label:String, icon:Class=null):IFlexDisplayObject {
            var b:Button = Button(super.createNavItem(label, icon));
            b.labelPlacement = labelPlacement;
            return b;
        }
    }
}

任何帮助都将不胜感激。

Answer 1

如果您可以使用Spark组件，则可以通过ButtonBar按钮的自定义外观来完成此操作。在为ButtonBar设置外观时，您必须创建4个外观：

• 一个用于ButtonBar本身
• 第一个按钮
• 一个用于中间按钮
• 最后一个按钮

除非所有按钮看起来都一样，否则在这种情况下，所有三种按钮只需要一个皮肤。

首先通过复制默认的Spark ToggleButtonSkin为按钮创建三个（或一个）皮肤。在FlashBuilder向导中，如下所示：

向下滚动到底部，找到ID为labelDisplay的Label标签。它的masDisplayedLines属性设置为1。将其删除或将其设置为更方便您使用的值。

现在通过复制默认的Spark ButtonBarSkin为ButtonBar本身创建一个外观。找到三个按钮工厂，并用你刚创建的按钮皮肤替换skinClass样式。

<fx:Declarations>
    <fx:Component id="firstButton">
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarFirstButtonSkin" />
    </fx:Component>

    <fx:Component id="middleButton" >
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarButtonSkin" />
    </fx:Component>

    <fx:Component id="lastButton" >
        <s:ButtonBarButton skinClass="net.riastar.skins.MyButtonBarLastButtonSkin" />
    </fx:Component>
</fx:Declarations>

现在将这个皮肤应用到你的ButtonBar，你已经完成了设置。

<s:ButtonBar dataProvider="{dp}" skinClass="net.riastar.so.MyButtonBarSkin" width="200" />

请记住，一般情况下使用Spark组件：如果您希望它们看起来不同而不真正更改/自定义其行为，请使用外观而不是自定义组件。