在Flex中爲什麼向VBox添加子組件會改變它的寬度和高度？

這裏是我的代碼：

<?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(); 
}

這是VBox裏面的Hbox： With Hbox

這是沒有HBOX：
Without HBox

有人知道爲什麼會這樣？

來源

2011-08-03 DaveC

定義「倍數更大」。它垂直太大了嗎？水平？ –

@Jason Towne兩個人，不知道它有多大，但它大大超過了300 * 50。 – DaveC

你有截圖嗎？ 'rollOverWindow'在另一個容器中嗎？ –

你想實現什麼？如果您只是希望HBox像VBox一樣擴展到300x50，那麼儘量不要給HBox一個寬度和高度，也許這樣它就會取其子組件的尺寸。

來源

2011-08-03 15:16:20

我已經充實了這個問題。我只是希望VBox保持相同的大小，但即使HBox小於包含它的VBox，VBox仍然在改變大小。 – DaveC

你需要考慮你給到垂直框中的內邊距：

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

有了這些填充和50的HBox中的尺寸，垂直框的內容70像素垂直消耗。 VBox ist設置爲50，所以它會顯示滾動條。不知道爲什麼還有一個水平滾動條。

來源

2011-08-03 15:44:03

正如Jens所說，你得到垂直滾動條的原因是因爲你的VBox頂部和底部有一個10px填充，導致它佔用70px。要麼將VBox的height設置爲70px，要麼將HBox的height設置爲30px以補償填充。

對於水平滾動條，很難說它爲什麼顯示出來。我只需將horizontalScrollPolicy設置爲off就可以清除它。

來源

2011-08-03 15:56:31

添加一個額外的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; 
}

來源

2011-08-03 15:57:05 DaveC

也可以。 :) –

在Flex中爲什麼向VBox添加子組件會改變它的寬度和高度？

回答

相關問題