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

【问题标题】：setting content area in custom flex component在自定义 flex 组件中设置内容区域
【发布时间】：2010-12-25 19:12:31
【问题描述】：

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

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

如何设置这个内容区？

【问题讨论】：

标签： apache-flex

【解决方案1】：

尝试使用画布？

【讨论】：

【解决方案2】：

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

[DefaultProperty("nameOfDefaultProperty")]

然后您还可以为该属性定义一个 setter：

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

【讨论】：

【解决方案3】：

实际上有几个步骤。

您的自定义组件需要设置其 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>

【讨论】：