在 Flex 中，为什么向 VBox 添加子组件会使其宽度和高度发生如此大的变化？

Question

我正在使用 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 的情况：

有人知道为什么会发生这种情况吗？

Answer 1

您需要考虑为 VBox 指定的内边距：

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

使用这些内边距和 HBox 大小为 50 时，VBox 的内容垂直消耗 70 像素。 VBox 设置为 50，因此它将显示滚动条。不知道为什么还有一个水平滚动条。

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

Answer 3

你想实现什么目标？如果您只是希望 HBox 像 VBox 一样扩展到 300x50，请尽量不要给 HBox 指定宽度和高度，也许这样它只会采用其子组件的尺寸。

Answer 4

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

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