Question

我在画布内的VBox中有多个HBox，如下所示：

<?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中的最后一个孩子与其他组件重叠。 如何防止Canvas中的VBox孩子重叠？你如何调试这种情况？

我尝试了以下内容：

删除基于大小的百分比
IncludeInLayout = true

Sceenshot - 标签和复选框重叠：

Answer 1

很难说所提供的信息，但首先想到的两个问题是：

您的VBox身高是否高于其子女身高的总和？
您是否在VBox上设置了verticalGap属性？ 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属性与其visible属性使用的条件相同来解决此问题。

不确定导致问题的原因。

如何修复画布中重叠的VBox儿童？

3 个答案: