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

Question

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

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

如何设置此内容区域？

Answer 1

有实际上是几步就到了。

1. 您的自定义组件需要设置其DefaultProperty元数据，以便孩子不会与自定义组件本身发生冲突。
2. 然后，您需要将它们收藏在实例var中以便稍后添加到您的内容区域，因为这些属性将在创建子组件之前设置。
3. 最后，如果有多个孩子被指定的DefaultProperty将交由一个数组对象（而不是单个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

尝试使用画布？

Answer 3

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

[DefaultProperty("nameOfDefaultProperty")] 

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

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