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

Question

У меня есть несколько HBox-ов внутри 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 в Canvas? Как вы отлаживаете эту ситуацию?

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

• Снятие размеров в процентах
• IncludeInLayout = true

Sceenshot - Перекрытие меток и флажков:

Answer 1

Я только что попробовал это (приложение 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 2

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

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

Answer 3

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

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