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

Posted 2021-05-06

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

我尝试过以下方法：

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

截图 - 标签和复选框重叠：qazxsw poi

答案

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

1. 你的VBox身高是否高于孩子身高的总和？
2. 你在VBox上设置了verticalGap属性吗？ verticalGap确定子节点之间的垂直间距。

另一答案

我刚试过这个（AIR应用程序），它看起来对我来说没问题。

另一答案

我通过使其中一些组件的includeInLayout属性与其visible属性使用相同的条件来解决此问题。

不知道究竟是什么导致了这个问题。