Question

我想在Canvas中动态添加Container中的组件（TileList约束每个子节点具有相同的大小，GridList的性能很差），例如

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

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

当我点击按钮时，我希望添加一个组件（无论组件是什么，也许每个组件都有不同的大小），如果所有添加的子组件的总宽度大于myHolder，我希望新孩子可以从新行开始，同时拉伸myHolder的高度。（使用自定义代码的布局更好）

Answer 1

要获得所需的功能，我不会使用HBox。正如alxx建议的那样，TileList更适合这种情况。

以下是使用TileList开始的一些示例：

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

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

Answer 2

在Canvas上，您可以完全自由地使用x和y属性在任何地方放置组件，因此有很多方法可以为这只猫设置皮肤。由于您需要行，因此其中一种方法可能（未经测试）：

//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;
}

这假定Canvas具有固定宽度和设置高度，具体取决于布局。您可以稍后添加填充和间隙，这是一个很好的练习：）

动态添加组件

2 个答案: