Flex 4 动态调整父容器的大小以包含子容器答案

【问题标题】：Flex 4 dynamically resize parent container to contain childrenFlex 4 动态调整父容器的大小以包含子容器
【发布时间】：2010-02-11 23:51:21
【问题描述】：

有没有一种简单的方法可以让父容器（例如组）在子容器调整大小时调整大小？

下面是一个小示例应用程序。当我将 200x200 的“食物”放入“胃”时，胃和包含 100x100 的“身体”应该调整大小以容纳食物。

有什么想法吗？

（来自这个要点http://gist.github.com/301292）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/halo"
      minWidth="1024"
      minHeight="768"
      creationComplete="application1_creationCompleteHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;

   protected function application1_creationCompleteHandler(event:FlexEvent):void {

   }

   protected function eatFoodTrigger_clickHandler(event:MouseEvent):void {
    var food:Border = new Border();
    food.setStyle('backgroundColor', 0x15DCA9);
    food.width = 200;
    food.height = 200;

    stomach.addElement(food);

   }
  ]]>
 </fx:Script>

 <s:Group verticalCenter="0" horizontalCenter="0">
  <s:layout>
   <s:VerticalLayout horizontalAlign="center" />
  </s:layout>

  <s:Label fontSize="24" text="The 100x100 pink/brown body has a stomach inside it.
     Press eat and the stomach gets 200x200 'food' added to it.
     I want the body and the stomach to expand to fit the food." width="200">
  </s:Label>

  <s:Border id="body"
      backgroundColor="0x333333"
      minWidth="100"
      minHeight="100"
      borderColor="0xFF4466"
      borderWeight="5">
   <s:Group id="stomach">
   </s:Group>
  </s:Border>

  <s:Button id="eatFoodTrigger" click="eatFoodTrigger_clickHandler(event)" label="eat" />
 </s:Group>
</s:Application>

【问题讨论】：

标签： apache-flex mxml flex4

【解决方案1】：

好的，这是 flex 4 sdk 中的一个错误，现已修复。太棒了。

发件人：http://forums.adobe.com/thread/575252

你的例子在最近对我有用建造。也许这是一个旧的错误建造。尝试新的每晚之一构建：

http://opensource.adobe.com/wiki/display/flexsdk/DownloadFlex4

-瑞恩

【讨论】：

【解决方案2】：

显然，这有点太晚了，但您可以覆盖 addElementAt 方法并添加一些用于调整大小的功能。下面，您可以看到 addElementAdd() 应该/可以如何被覆盖。

//This would be placed in a custom component that extends Group. Your stomach would be this component.
override public function addElementAt(element:IVisualElement, index:int):IVisualElement
{
    super.addElementAt(element, index);

    ChangeWatcher.watch(element, "width", function():void{ resizeHandler(element) });
    ChangeWatcher.watch(element, "height", function():void{ resizeHandler(element) });
}

private function resizeHandler(el:IVisualElement):void
{
    var element:DisplayObject = el as DisplayObject;

    //Rest of the resizing code.
}

我知道这适用于 flex3 和 Canvas，因此它也应该适用于 flex4 和 Group。

【讨论】：