在 Flex 中，为什么将子组件添加到 VBox 会改变它的宽度和高度？答案

【问题标题】：In Flex why does adding a child component to a VBox change it's width and height so much?在 Flex 中，为什么将子组件添加到 VBox 会改变它的宽度和高度？
【发布时间】：2011-08-03 15:02:32
【问题描述】：

我正在使用 Flex 3。

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.containers.HBox;
            import mx.managers.PopUpManager;

        [Bindable]private static var openRollOver:AssemblySearchResultContentsRollOver;
        private var rollOverWindow:VBox;
        private var created:Boolean = false;

        private function createPopup():void
        {
            rollOverWindow = new VBox();
            rollOverWindow.width = 300;
            rollOverWindow.height = 50;
            rollOverWindow.setStyle("backgroundColor", "#578BBB");
            rollOverWindow.setStyle("paddingTop", "10");
            rollOverWindow.setStyle("paddingBottom", "10");
            rollOverWindow.setStyle("paddingLeft", "15");
            rollOverWindow.setStyle("paddingRight", "15");

            var hbox:HBox = new HBox();
            hbox.width = 200;
            hbox.height = 50;
            hbox.setStyle("backgroundColor", "red");

            // If I comment out this line then the VBox is 300*50, if I leave it in then
            // the VBox is multiple times bigger (lots of scrolling vertical and horizontal)
            rollOverWindow.addChild(hbox);
            created = true;
        }

        public function showOptions():void
        {
            if (!created)
                createPopup();
            var pt:Point = new Point(0, 0);
            pt = localToGlobal(pt);
            rollOverWindow.x = pt.x + 80;
            rollOverWindow.y = pt.y + 45;
            PopUpManager.addPopUp(rollOverWindow, this);
            openRollOver = this;
        }

        public function hideOptions():void
        {
            PopUpManager.removePopUp(rollOverWindow);
            openRollOver = null;
        }

        private static function closeOpenOptions():void
        {
            if(openRollOver != null)
                openRollOver.hideOptions();
        }
    ]]>
</mx:Script>

蓝框是一个弹出窗口，当图像悬停在另一个视图上时，它使用方法控制：

private function imageOver(event:MouseEvent):void
{
    event.stopPropagation();
    rollOverWindow.showOptions();
}

private function imageOut(event:MouseEvent):void
{
    event.stopPropagation();
    rollOverWindow.hideOptions();
}

这是 VBox 内的 Hbox：

这是没有 Hbox 的：

有人知道为什么会这样吗？

【问题讨论】：

定义“大几倍”。垂直方向是否太大？横向？
@Jason Towne 两者，不知道它有多大，但它超过了 300 * 50 很多。
你有截图吗？ rollOverWindow 在另一个容器中吗？
@Jason Towne 添加了我的完整代码和截图

标签： actionscript-3 apache-flex flex3

【解决方案1】：

您需要考虑为 VBox 提供的填充：

        rollOverWindow.setStyle("paddingTop", "10");
        rollOverWindow.setStyle("paddingBottom", "10");
        rollOverWindow.setStyle("paddingLeft", "15");
        rollOverWindow.setStyle("paddingRight", "15");

使用这些填充和 50 的 HBox 大小，VBox 的内容垂直消耗 70px。 VBox ist 设置为 50，因此它将显示滚动条。不知道为什么还有水平滚动条。

【讨论】：

【解决方案2】：

添加一个额外的 VBox 和大约 100% 的宽度和高度似乎可以解决这个问题。这是我的新方法：

private function createPopup():void
{
    rollOverWindow = new VBox();                

    var vbox:VBox = new VBox();
    vbox.setStyle("backgroundColor", "#578BBB");
    vbox.setStyle("horizontalAlign", "right");
    vbox.setStyle("borderStyle", "solid");
    vbox.setStyle("paddingTop", 10);
    vbox.setStyle("paddingBottom", 10);
    vbox.setStyle("paddingLeft", 10);
    vbox.setStyle("paddingRight", 10);
    vbox.setStyle("cornerRadius", 10);
    vbox.percentWidth = 100;
    vbox.percentHeight = 100;

    var hb:HBox = new HBox();
    hb.width = 100;
    hb.height = 10;
    hb.setStyle("backgroundColor", "red");

    vbox.addChild(hb);
    rollOverWindow.addChild(vbox);

    created = true;
}

【讨论】：

【解决方案3】：

你想达到什么目标？如果你只是想让 HBox 像 VBox 一样扩展到 300x50，尽量不要给 HBox 一个宽度和高度，也许这样它只会取其子组件的尺寸。

【讨论】：

我已经充实了这个问题。我只是希望 VBox 保持相同的大小，但即使 HBox 比包含它的 VBox 小，VBox 仍在改变大小。

【解决方案4】：

正如 Jens 所提到的，您获得垂直滚动条的原因是因为您的 VBox 在顶部和底部有一个 10px 填充，导致它占用了 70px。将VBox 的height 设置为70px 或将HBox 的height 设置为30px 以补偿填充。

对于水平滚动条，很难说它为什么会出现。我只需将VBox 上的horizontalScrollPolicy 设置为off 即可摆脱它。

【讨论】：