当孩子的可见性改变时调整容器的大小？答案

【问题标题】：Resizing a container when child's visibility is changed?当孩子的可见性改变时调整容器的大小？
【发布时间】：2010-05-28 01:42:23
【问题描述】：

当我将容器中的子项的 visible 属性设置为 false 时，如何让容器调整大小？在下面的示例中，当单击“Toggle”时，“containerB”被隐藏，但主容器的可滚动区域没有调整大小。（我不想滚动浏览很多空白区域。）

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>

【问题讨论】：

标签： apache-flex resize scroll hide visible

【解决方案1】：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center" includeInLayout="{containerB.visible}">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>
</mx:Application>

你好，只要让 containerB 的 includeInLayout 属性依赖于它的 visible 属性，

我刚刚在 conatinerB 属性列表中添加了 includeInLayout="{containerB.visible}"，这是有效的，我希望这是你想要的

有一个 gr8 时间

安库尔·夏尔马

【讨论】：

【解决方案2】：

有很多方法，我认为鉴于您当前的代码，您应该在 containerB 上收听 show and hide 事件。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationComplete()">
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
public function creationComplete():void{
 containerB.addEventListener(FlexEvent.SHOW, onContainerBChange );
 containerB.addEventListener(FlexEvent.HIDE, onContainerBChange );
}
public function onContainerBChange():void{
if(this.containerB.visible == true){
this.mainContainer.width = this.containerB.width + this.containerA.width
this.mainContainer.height = this.containerB.height + this.containerA.height
} else {
 this.mainContainer.width = this.containerA.width;
this.mainCintainer.height = this.containerA.height;
}
}

    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center" id="mainContainer">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>

我正在浏览器中编写代码，所以这应该被视为伪代码。如果不是在 onContainerBChange 处理程序中使用调整大小代码，而是使显示列表无效并将代码放入 updateDisplayList()；

作为一个完整的旁白；我希望您的真实代码不使用其中只有一个容器的 VBox。在这个简单的例子中，没有理由不能完全消除 containerA 和 containerB，而在一个 VBox 中只有三个按钮。

【讨论】：