dynamic add component

I want to dynamically add component in Container like Canvas(TileList constraints each child has the same size, GridList is poor in performance), for example

<mx:Canvas id="myHolder" width="600" height="550">

</mx:Canvas>
<mx:Button label="Add Button" click="addButton()"/>

when I click the button, I hope add a component(whatever the component is, and maybe each component has different size), and if the total width of all added child is greater than myHolder, I hope the new child can b开发者_开发问答egin in new line, and stretch the height of myHolder at the same time.(layout with custom code is better)

On Canvas you have complete freedom to lay components anywhere using their x and y properties, so there's a lot of ways to skin this cat. Since you need rows, one of the methods may be (not tested):

//inside of your Canvas-based component
private function updateChildrenPositions():void
{
     var rowY:Number = 0;
     var rowWidth:Number = 0;
     var rowHeight:Number = 0;
     for (var i:int = 0, total:int = numChildren; i < total; i++)
     {
         var child:DisplayObject = getChildAt(i);
         if (rowWidth + child.width > width)
         {
             //child will cause overflow, start next row
             rowY += rowHeight;
             rowWidth = 0;
             rowHeight = 0;
         }
         rowWidth += child.width;
         child.x = rowWidth;
         child.y = rowY;
         if (child.height > rowHeight) rowHeight = child.height; //accumulating max height
     }
     height = rowY + rowHeight;
}

This assumes Canvas has fixed width and set height depending on layout. You can add paddings and gaps later, it's a good exercise :)

To get the functionality you want, I wouldn't use an HBox. As alxx suggested, a TileList would be a better fit in this situation.

Here are some examples using a TileList to get you started:

http://blog.flexexamples.com/category/halo/tilelist/

http://learn.adobe.com/wiki/display/Flex/TileList