使用约束的布局和比例布局一起挠曲

我试图使用基于百分比的布局，基于contraint布局沿实现以下布局使用约束的布局和比例布局一起挠曲

我有3个帆布我的应用程序使用正确的设置百分比，但我设置的东西像top = 10 left = 10来创建“border border”没有效果。

我该如何解决这个问题？

编辑

<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>

来源

2010-07-08 dubbeat

里面的3个画布元素是什么样的元素？那也是一个画布？ – Pbirkoff 2010-07-08 12:02:21

你可以发布的代码 - imgur不可访问。 – Amarghosh 2010-07-08 12:04:38

嗨，我在编辑中添加代码。有问题的3个容器的ID为“波浪”（多数民众赞成在顶部），“左”和“右”。 – dubbeat 2010-07-08 12:35:37

要在顶部加入了国内空白，对vbox，不wave设置top="10"。

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

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

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

来源

2010-07-08 12:43:19 Jason

我得到了顶部=“10”好，但在这样做，我得到一个垂直滚动。 Idont't没有“差距”财产？ – dubbeat 2010-07-08 13:48:46

我琢磨了一下，得到了我喜欢的东西。谢谢您的帮助。我结束了不得不将vbox宽度设置为95％top =“10”left =“10”。 – dubbeat 2010-07-08 14:14:39

@dubbeat，很高兴听到你把它设置。尽管Flex组件的布局有时候会很棘手，但这绝对值得！ – Jason 2010-07-08 15:42:36

使用约束的布局和比例布局一起挠曲

回答

相关问题