Как исправить перекрывающиеся дети VBox на холсте?

Question

У меня есть несколько HBoxes внутри VBox внутри холста, как так:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"> 
<mx:Canvas width="600" height="500"> 
     <mx:VBox height="100%" left="10" right="10"> 
     <mx:HBox width="100%" > 
     <mx:VBox width="48%" height="100%" horizontalAlign="left"> 
     <mx:Label text="Label" /> 

     </mx:VBox> 

     <mx:VBox width="48%" height="100%" horizontalAlign="left"> 
     <mx:Label text="Label" /> 
     <mx:HBox width="100%"> 
      <mx:VBox width="48%"> 
       <mx:Label text="Label" /> 
       <mx:ComboBox /> 
      </mx:VBox> 

     </mx:HBox> 
     </mx:VBox> 


     </mx:HBox> 
     <mx:VBox> 
      <mx:HBox> 
       <mx:Label text="Label" /> 
       <mx:Label text="Label" /> 
      </mx:HBox> 
     </mx:VBox> 
     <mx:HBox> 
      <mx:Label text="Label" /> 
      <mx:ComboBox/> 
     </mx:HBox> 
     <mx:HBox> 
     <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" 
     includeInLayout="false" > 
     <mx:Label text="Label" /> 

     </mx:VBox> 
     <mx:VBox> 
     <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" 
      includeInLayout="false" 
      > 
      <mx:VBox > 
        <mx:Label text="Text" /> 
        <mx:ComboBox /> 
      </mx:VBox> 
      <mx:VBox> 
        <mx:Label text="Label" /> 
        <mx:ComboBox /> 
      </mx:VBox> 
     </mx:HBox> 
     <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" 
      includeInLayout="false" 
      > 
      <mx:VBox> 
       <mx:Label text="Label:"/> 
       <mx:ComboBox /> 
      </mx:VBox> 
      <mx:VBox> 
       <mx:Label text="Label: "/> 
       <mx:ComboBox /> 
      </mx:VBox> 
     </mx:HBox> 
     </mx:VBox> 
     </mx:HBox> 
     <mx:HBox > 
      <mx:Label text="Label:" /> 
      <mx:CheckBox /> 
     </mx:HBox> 
     </mx:VBox> 
    </mx:Canvas> 
</mx:Application> 

Последний ребенок в VBox перекрывается с другими компонентами. Как вы предотвращаете перекрытие детей VBox на холсте? Как вы отлаживаете эту ситуацию?

Я попробовал следующее: процент

• Удаление проклеивающего
• IncludeInLayout = истинный

Sceenshot - Этикетка и Checkbox Перекрытия: alt text http://i43.tinypic.com/25qb1cm.jpg

Answer 1

Трудно сказать, с предоставленной информацией, но два первых вопроса, которые приходят на ум, - это:

1. Является ли ваша высота VBox более высокой, чем сумма его детей?
2. Установили ли вы свойство verticalGap на VBox? verticalGap определяет вертикальное расстояние между дочерними элементами.

Answer 2

Я просто попробовал это (приложение AIR), и это выглядит хорошо для меня.

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 


    <mx:Canvas height="100%" width="100%" 
     borderStyle="solid" 
     backgroundColor="0x0000ff"> 

     <mx:VBox height="100%" width="100%"> 

     <mx:VBox backgroundColor="0xff0000" height="50%" width="100%"> 
      <mx:HBox backgroundColor="0x000000" height="50%" width="50%"/> 
      <mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/> 
      <mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/> 
     </mx:VBox> 

    <mx:HBox height="50%" width="100%" 
     backgroundColor="0xff0000" backgroundAlpha="0.5" 
     borderColor="0x000000" borderStyle="solid" borderThickness="1"/> 

    </mx:VBox>   

    </mx:Canvas> 



</mx:WindowedApplication> 

Answer 3

Я решил это, сделав свойство includeInLayout некоторых из этих компонентов тем же условным, что и их видимое свойство.

Не уверен, что вызвало проблему.