2

我通过执行 File > New > MXML 皮肤并基于 spark.components.button 创建了一个有点自定义的 Spark 按钮。问题是我需要向按钮组件添加一个额外的文本字段并动态更改该文本......但当然，Spark Button 上无法识别该属性。

有没有一种简单的方法可以将此字段添加到我的自定义按钮皮肤及其属性中，以便解决它？如果没有，是否有一种简单的方法可以完成我所做的并扩展 Spark Button？我似乎找不到任何示例来说明如何在没有全部用 ActionScript 编写的情况下执行此操作。

4

1 回答 1

6

我很高兴你问！这比您想象的要容易得多，所以不要气馁！一旦您掌握了 ActionScript 的窍门，它就非常简单。

首先，让我们定义我们想要什么。阅读您的问题后，我相信您想使用如下按钮：

<local:MyCustomButton label="Hello" label2="World!"/>

那么让我们来看看如何让这成为现实。

现在，我强烈建议使用 ActionScript 扩展 Button，但也可以在 mxml 中进行：

//MyCustomButton.mxml
<?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" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

</s:Button>

然后你可以在 a 中添加SkinPart你需要的 s <fx:Script>：

<?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" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


        ]]>
    </fx:Script>


</s:Button>

因此，现在当您制作皮肤时，您应该包含类似于原始标签的内容，只是使用不同的 ID 来反映您的新 SkinPart：

可是等等！我们的第二个标签应该显示什么文本？好吧，我们需要添加另一个属性，您可以为按钮的每个单独实例设置该属性：

<?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" 
          xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

            [SkinPart]
            public var secondLabelDisplay:spark.components.Label;


            private var _label2:String;

            public function get label2():String
            {
                return _label2;
            }

            public function set label2(value:String):void
            {
                _label2 = value;
            }


        ]]>
    </fx:Script>


</s:Button>

很酷，所以现在我们可以在使用按钮时设置 label2，但此时它不会更改标签的实际文本属性。我们需要将 label2 连接到我们的 secondLabelDisplay。我们通过在 label2 更改时调用 invalidateProperties 来做到这一点，然后更改 commitProperties 中的标签（由于 invalidateProperties() 调用，这将被调用）：

  <?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" 
              xmlns:mx="library://ns.adobe.com/flex/mx">

        <fx:Script>
            <![CDATA[

                [SkinPart]
                public var secondLabelDisplay:spark.components.Label;


                private var _label2:String;
                private var label2Changed:Boolean;

                public function get label2():String
                {
                    return _label2;
                }

                public function set label2(value:String):void
                {
                    _label2 = value;
                    label2Changed = true;
                    invalidateProperties();
                }

                override protected function commitProperties():void
                {
                    super.commitProperties();

                    if(label2Changed)
                    {
                        label2Changed = false;
                                            secondLabelDisplay.text = label2;
                    }

                }


            ]]>
        </fx:Script>


    </s:Button>

最后，您会注意到，如果您在label2运行后再次更改，标签将显示更改。label2但是，如果您在我们的目标用法中设置初始值，它不会显示更改。Flex 团队专门针对这种情况做了一个特殊的方法，partAdded()。我不会详细介绍它，因为已经有大量关于该主题的文献。

最后，这是我们完成的自定义按钮，等待皮肤使用它：

<fx:Script>
    <![CDATA[

        [SkinPart]
        public var secondLabelDisplay:spark.components.Label;


        private var _label2:String;
        private var label2Changed:Boolean;

        public function get label2():String
        {
            return _label2;
        }

        public function set label2(value:String):void
        {
            _label2 = value;
            label2Changed = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(label2Changed)
            {
                label2Changed = false;
                                    secondLabelDisplay.text = label2;
            }

        }

        override protected function partAdded(partName:String, instance:Object):void
        {
            if(instance == secondLabelDisplay)
            {
                secondLabelDisplay.text = _label2;
            }

        }


    ]]>
</fx:Script>

祝你好运！

于 2011-01-28T00:15:27.987 回答