结合使用约束布局和百分比布局

Question

我正在尝试使用基于百分比的布局以及基于约束的布局来实现以下布局

http://imgur.com/rgoBe.jpg

我在应用程序中设置了3个画布，并设置了正确的百分比，但是我将top = 10 left = 10之类的内容设置为“边界边距”无效。

我怎样才能解决这个问题？

编辑

    <containers:GradientVBox width="820"
                             height="625"
                             id="vbox">
        <containers:GradientCanvas width="100%"
                     height="25%"
                     id="wave"
                     click="collapseWaveform(event)"
                     buttonMode="true" cornerRadiusBottomLeft="16"
                             cornerRadiusBottomRight="16"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" top="10" />
        <mx:HBox width="100%"
                 height="75%"
                 id="myhbox"
                 paddingTop="0">
            <containers:GradientCanvas width="50%"
                          height="100%"
                          alpha="1.0"
                          id="left"
                          buttonMode="true" cornerRadiusBottomRight="8"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" left="10">
                <content:Content width="95%"
                                 height="95%"
                                 id="content"
                                 verticalCenter="0"
                                 horizontalCenter="1"
                                 horizontalScrollPolicy="off"
                                 resize="resizeIt()">
                    <mx:ViewStack id="contentviewstack"
                                  width="100%"
                                  height="100%">

                        <containers:ContentContainerSoundCloud id="soundcloudcontent"
                                                               width="100%"
                                                               height="100%"
                                                               cornerRadius="5"
                                                               borderThickness="0"
                                                               borderStyle="solid"/>
                        <containers:ContentContainerLoopMasters id="loopmasterscontainer"
                                                                cornerRadius="5"
                                                                borderThickness="0"/>
                        <containers:ContentContainerClips id="clipscontents"
                                                          cornerRadius="5"
                                                          borderThickness="0"/>

                    </mx:ViewStack>
                </content:Content>
            </containers:GradientCanvas>
            <containers:GradientCanvas width="50%"
                           height="100%"
                           id="right"
                           buttonMode="true" cornerRadiusBottomRight="8"
                             cornerRadiusTopLeft="8"
                             cornerRadiusTopRight="8"
                             gradientFrom="0xffffff"
                             gradientTo="0xf5f5f5" right="10" left="10"/>
        </mx:HBox>

    </containers:GradientVBox>


</mx:Application>

Answer 1

要在顶部添加间隙，请在vbox上设置top="10" ，而不要设置wave 。

要在中间获得10像素的间隙，请在vbox上设置gap="10" 。

要在右侧获得10像素的间隙，请在vbox上设置right="10" 。

那应该创建您要寻找的布局。