Question

我想创建一个带有三个标签的自定义Button组件：left-center，center-right-rightied。我不能只使用标签对齐属性，因为我想同时使用所有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]元数据。

我现在卡住了，得到以下编译错误：

默认属性的多个初始化值，'label'，类型为'String'。

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

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

我该如何解决这个问题？

Answer 1

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

为什么不将它作为皮肤而不是自定义组件？

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

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

1 个答案: