Question

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

我的应用程序中有3个画布设置正确的百分比但是我设置了top = 10 left = 10来创建“border margin”没有效果。

我该如何解决这个问题？

修改

    <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

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

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

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

那应该创建你正在寻找的布局。

使用约束布局和百分比布局一起flex

1 个答案: