0

我有一个自定义的 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;
        }
    }
}

任何帮助，将不胜感激。

4

1 回答 1

1

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

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

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

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

在此处输入图像描述

向下滚动到底部并找到带有 id 的标签标签labelDisplay。它的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 组件：如果您希望它们看起来不同而不真正改变/自定义它们的行为，请使用蒙皮而不是自定义组件。

于 2012-06-25T09:27:40.453 回答