创建自定义togglebuttonbar内的多行标签 [英] Creating a multiline label inside a custom togglebuttonbar

问题描述

我有一个自定义toggleButtonBar类，允许标签位置上的按钮，不过，我想有标签为多。我不擅长扩展默认组件。是否有任何人能帮助我吗？

i have a custom toggleButtonBar class that allows label placement on the button, however, i would like to have the labels to be multiline. I'm not good at extending default components. Is there anyone that can help me out?

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;
        }
    }
}

任何帮助将是AP preciated。

Any help would be appreciated.

推荐答案

如果你可以用Spark组件，您可以通过自定义皮肤的按钮栏的按钮做到这一点。当剥皮的按钮栏，你必须虽然创建4个外观：

If you can use Spark components, you can accomplish this through a custom skin for the buttons of the ButtonBar. When skinning the ButtonBar, you'll have to create 4 skins though:

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

除非所有的按钮可以查看相同的，在这种情况下，你会为​​所有这三种按键只需要一个皮肤。

Unless all the buttons can look the same, in which case you'll need only one skin for all three kinds of buttons.

首先通过复制默认的Spark ToggleButtonSkin创建三个（或一个）外观的按钮。在FlashBuilder向导，是这样的：

First create the three (or one) skins for the buttons by copying the default Spark ToggleButtonSkin. In the FlashBuilder wizard that would look like this:

向下滚动至底部，找到ID标签标记 labelDisplay的。它有它的 masDisplayedLines 属性设置为 1 。删除它或将它设置为一个值，该值是为您的使用情况更加方便。

Scroll down to the bottom and find the Label tag with id labelDisplay. It has its masDisplayedLines property set to 1. Remove it or set it to a value that is more convenient for your use case.

现在通过复制默认的Spark ButtonBarSkin创建的按钮栏本身的皮肤。找到这三个按钮的工厂，并与该按钮皮肤（S）刚刚创建替换的skinClass 的风格。

Now create a skin for the ButtonBar itself by copying the default Spark ButtonBarSkin. Find the three button factories and replace the skinClass styles with the button skin(s) you've just created.

<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>

现在将此皮肤的按钮栏和你所有的设置。

Now apply this skin to your ButtonBar and you're all set.

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

记住，一般与Spark组件：如果你想让他们的看的不同，而没有真正改变/自定义自己的行为，用剥皮，而不是自定义组件

Remember, in general with Spark components: if you want them to look different without really changing / customizing their behaviour, use skinning instead of custom components.

这篇关于创建自定义togglebuttonbar内的多行标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！