Question

我正在尝试定义扩展mx：VBox的自定义组件的内容区域。该组件具有预定义的页眉和页脚（可视子项），我想在中间设置区域以将子项添加到组件。该组件将使用如下：

<custom_component>
     <mx:button/>
</custom_component>

我如何设置此内容区域？

Answer 1

实际上有几个步骤。

您的自定义组件需要设置其DefaultProperty元数据，以便子项不会与自定义组件本身中的项目冲突。
然后，您需要将它们存放在实例var中，以便稍后添加到您的内容区域，因为将在创建组件子项之前设置属性。
最后，如果指定了多个子项，则DefaultProperty将被传递给一个Array对象（而不是一个UIComponent实例。）

所以你的自定义组件看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Metadata>
        [DefaultProperty("content")]
    </mx:Metadata>

    <mx:HBox id="headerBox"/>
    <mx:VBox id="contentBox"/>
    <mx:HBox id="footerBox"/>

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            private var _contentChildren:Array;

            public function set content(c:*) : void {
                // Allow 1 or more children to be specified
                _contentChildren = (c as Array) || [c];
            }

            override protected function createChildren() : void {
                // Call super so contentBox gets created first
                super.createChildren();

                for each (var child:UIComponent in _contentChildren) {
                    contentBox.addChild(child);
                }
            }
        ]]>
    </mx:Script>
</mx:VBox>

Answer 2

在自定义组件中，添加DefaultProperty元数据标记：

[DefaultProperty("nameOfDefaultProperty")]

然后你还要为该属性定义一个setter：

public function set nameOfDefaultProperty(value:UIComponent):void
{
    if (value != null)
    {
        // add "value" to the display list here
    }
}

Answer 3

尝试使用画布？

在自定义flex组件中设置内容区域

3 个答案: