如何将标签容器宽度正确调整为其父或兄弟宽度答案

【问题标题】：How to adjust properly the Label container width, to its parent or brother width如何将标签容器宽度正确调整为其父或兄弟宽度
【发布时间】：2012-01-19 13:09:00
【问题描述】：

我对标签及其容器的宽度有疑问。我在右侧有 1 个面板，将尽可能多地占用空间，在左侧有一个 VGroup，顶部的宽度 1 个面板将占用儿童所需的宽度，底部的 1 个面板将具有与左侧相同的宽度顶部面板。

在左上角的面板上有一个可以改变其宽度的按钮。在左下方的面板上有一个标签，它会根据容器面板调整其宽度，这样，标签会在其容器上设置断点。

它在开始时可以正常工作，当按钮的宽度变大时可以正确调整大小。但是当按钮变小宽度时，左边的面板和组的大小和以前一样，所以左边的部分只会在需要的时候变大，而不会减小它的宽度。

<fx:Script>
    <![CDATA[
        protected function buttonClick(event:MouseEvent):void{
            button.width= 70+Math.random()*200;
        }
        protected function vgroupResize():void{}
    ]]>
</fx:Script>

<s:HGroup width="500" height="500">
    <s:VGroup id="vGroup" height="100%" resize="vgroupResize()">
        <s:Panel id="leftUp" title="left up" width="100%" height="100%" minWidth="1">
            <s:Button id="button" label="button" click="buttonClick(event)"/>
        </s:Panel>

        <s:Panel id="leftDown" title="left down" width="{leftUp.width}">
            <s:Label width="100%" text="nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan"/>
        </s:Panel>
    </s:VGroup>

    <s:Panel title="right" width="100%" height="100%"/>
</s:HGroup>

我找到了 2 个总是有效的丑陋解决方案，但我想要正确的方法或不那么可怕的方法来做到这一点。

一种解决方案是在按钮改变宽度时设置 leftDown.width= 1：

        protected function buttonClick(event:MouseEvent):void
        {
            button.width= 70+Math.random()*200;
            leftDown.width= 1;
        }

其他解决方案是在按钮更改宽度时移除左下面板，并在调整 VGroup 大小时重新添加：

        protected function buttonClick(event:MouseEvent):void
        {
            button.width= 70+Math.random()*200;

            if(leftDown.parent!=null) vGroup.removeElement(leftDown);
        }

        protected function vgroupResize():void
        {
            if(leftDown.parent==null) vGroup.addElement(leftDown);
        }

我希望有人知道这样做的正确方法。

【问题讨论】：

标签： actionscript-3 apache-flex width label containers

【解决方案1】：

我根据 Sudharsanan 的建议重做了代码。现在可以正常工作了。

<fx:Script>
    <![CDATA[

        protected function buttonClick(event:MouseEvent):void
        {
            button.width= 70+Math.random()*200;
        }

    ]]>
</fx:Script>

<s:HGroup width="500" height="500">
    <s:VGroup id="vGroup" width="{leftUp.width==0?1:leftUp.width}" height="100%">
        <s:Panel id="leftUp" title="left up" height="100%">
            <s:Button id="button" label="button" click="buttonClick(event)"/>
        </s:Panel>

        <s:Panel id="leftDown" title="left down" width="100%">
            <s:Label width="100%" text="nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan"/>
        </s:Panel>
    </s:VGroup>

    <s:Panel title="right" width="100%" height="100%"/>
</s:HGroup>

【讨论】：

【解决方案2】：

我的意见是让 vpanel 宽度像这样绑定到按钮宽度

<s:HGroup width="500" height="500">
        <s:VGroup id="vGroup" width="{button.width + 2}" height="100%" resize="vgroupResize()">
            <s:Panel id="leftUp" title="left up" width="100%" height="100%" minWidth="1">
                <s:Button id="button" label="button" click="buttonClick(event)"/>
            </s:Panel>

            <s:Panel id="leftDown" title="left down" width="{leftUp.width}">
                <s:Label width="100%" text="nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan n y a n nyan"/>
            </s:Panel>
        </s:VGroup>

        <s:Panel title="right" width="100%" height="100%"/>
    </s:HGroup>

这比其他的都简单。

【讨论】：

这比其他两种方式效率更高。