Во 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>

Bluebox - это всплывающее окно, которое управляется с помощью методов в другом представлении, когда изображение находится над:

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

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

Это с Hbox внутри VBox:

Это без Hbox:

Кто-нибудь знает, почему это происходит?

Answer 1

Добавление дополнительного 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 2

Вам необходимо учесть отступы, которые вы дали VBox:

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

С этими отступами и размером HBox 50, содержимое VBox потребляет 70 пикселей по вертикали. VBox установлен на 50, поэтому он будет показывать полосы прокрутки. Не знаю, почему есть горизонтальная полоса прокрутки.

Answer 3

Как упоминал Дженс, причина, по которой вы получаете вертикальную полосу прокрутки, заключается в том, что ваш VBox имеет отступ 10px вверху и внизу, в результате чего он занимает 70px.Либо установите VBox height на 70px, либо установите height HBox на 30px для компенсации заполнения.

Для горизонтальной полосы прокрутки трудноскажи почему он появляетсяЯ бы просто установил horizontalScrollPolicy на off на VBox, чтобы избавиться от него.

Answer 4

Чего вы хотите достичь?Если вы просто хотите, чтобы HBox расширялся до 300x50, как VBox, постарайтесь не задавать HBox ширину и высоту, возможно, таким образом он просто примет размеры дочернего компонента.