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有关： With Hbox

这没有Hbox：
Without HBox

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

Answer 1

你需要考虑你给VBox的填充：

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

使用这些填充物并且您的HBox尺寸为50，VBox的内容垂直消耗70px。 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的{{1}}设置为height或将70px的{{1}}设置为height以补偿填充。

对于水平滚动条，很难说它出现的原因。我只需将HBox设置为30px horizontalScrollPolicy即可摆脱它。

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

4 个答案: