Question

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 begin in new line, and stretch the height of myHolder at the same time.(layout with custom code is better)

Answer 1

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 🙂