如何创建具有 3 个标签的自定义 Flex 4 按钮

Question

我想创建一个带有三个标签的自定义按钮组件：左对齐、居中对齐和右对齐。我不能只使用标签对齐属性，因为我想同时使用所有 3 个标签。

我对创建自定义组件很熟悉，但我以前从未尝试过构建这样的组件...

这是我目前所拥有的：

<?xml version="1.0" encoding="utf-8"?>
<s:Button 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[

            private var labelContentL:String;
            private var labelContentC:String;
            private var labelContentR:String;

            public function set labelL(value:String):void
            {
                labelContentL = value;
            }
            public function set labelC(value:String):void
            {
                labelContentC = value;
            }
            public function set labelR(value:String):void
            {
                labelContentR = value;
            }

            public function get labelL():String
            {
                return labelContentL;
            }
            public function get labelC():String
            {
                return labelContentC;
            }
            public function get labelR():String
            {
                return labelContentR;
            }

        ]]>
    </fx:Script>

    <s:Label id="l" width="100%" text="{labelContentL}" textAlign="left" paddingLeft="10" />
    <s:Label id="c" width="100%" text="{labelContentC}" textAlign="center" />
    <s:Label id="r" width="100%" text="{labelContentR}" textAlign="right" paddingRight="10" />

</s:Button>

按钮创建后标签不会改变，所以我不担心缺少[Bindable] 元数据。

我现在卡住了，出现以下编译器错误：

“String”类型的默认属性“label”的多个初始值设定项。

...对于 3 个<s:Label> 行中的每一行。

基于this answer 的类似问题，我尝试将label="" 添加到我的<s:Button> 声明中，但这只会增加另一个错误。

我该如何解决这个问题？

Answer 1

你的问题是按钮标签下的标签标签不是标签类型的项目，它是按钮上使用的标签，并且是字符串类型。

为什么不把它作为一个皮肤，而不是一个自定义组件呢？

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
    [HostComponent("ThreeLabelButton")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="disabled" />
    <s:State name="down" />
    <s:State name="over" />
    <s:State name="up" />
</s:states>

<s:Rect bottomLeftRadiusX="5" 
        bottomRightRadiusX="5" 
        topLeftRadiusX="5" 
        topRightRadiusX="5" 
        top="0" left="0" right="0" bottom="0">
    <s:fill>
        <s:SolidColor color.up="#CCCCCC" color.over="#555555" color.down="#888888" />
    </s:fill>
</s:Rect>
<mx:Label id="leftLabel" text="{hostComponent.leftText}" left="0" />
<mx:Label id="rightLabel" text="{hostComponent.rightText}" right="0" />
<mx:Label id="centerLabel" text="{hostComponent.centerText}" left="{(this.width - centerLabel.width) / 2}" /> 
</s:Skin>

这将适用于此类：

import mx.controls.Label;

import spark.components.supportClasses.ButtonBase;

public class ThreeLabelButtonComponent extends ButtonBase
{
    public function ThreeLabelButtonComponent()
    {
        super();
    }

    [SkinPart]
    public var leftLabel:Label;

    [SkinPart]
    public var rightLabel:Label;

    [SkinPart]
    public var centerLabel:Label;

            [Bindable]
    public var leftText:String;
            [Bindable]
    public var rightText:String;
            [Bindable]
    public var centerText:String;


    protected override function partAdded(partName:String, instance:Object):void
    {
        super.partAdded(partName, instance);
        if(instance === leftLabel)
        {
            leftLabel.text = leftText;  
        }
        if(instance === rightLabel)
        {
            rightLabel.text = rightText;    
        }
        if(instance === centerLabel)
        {
            centerLabel.text = centerText;  
        }
    }
}