柔性容器过长，重叠其他元素

这是事情。当我发现某些SkinnableContainer的内容变得比内容更大时，即使它们有0填充并且它们内部的布局是BasicLayout（即“全手动”布局），我使用纯AS3来做一些Flex组件的特殊自动布局）。柔性容器过长，重叠其他元素

下面是截图和代码。这个小测试创建一个应用程序并将布局设置为HorizontalLayout。然后，在应用程序容器中，我创建了两个SkinnableContainer，每个SkinnableContainer都包含一个带有一些文本的Label。我将SkinnableContainers设置为最大宽度为150px，并且其中的标签具有其父母的100％宽度。

截图

Layout screenshot

Main.mxml

<?xml version="1.0" encoding="utf-8"?> 
<local:MainApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="*"/>

MainApplication.as

package { 
    import flash.events.Event; 
    import spark.components.Application; 
    import spark.components.SkinnableContainer; 
    import spark.components.Label; 
    import spark.layouts.HorizontalLayout; 
    import spark.layouts.BasicLayout; 

    public class MainApplication extends Application { 
    public function MainApplication() { 
     super(); 

     var hl : HorizontalLayout = new HorizontalLayout(); 
     hl.gap = 0; 
     hl.paddingTop = 0; 
     hl.paddingLeft = 0; 
     hl.paddingRight = 0; 
     hl.paddingBottom = 0; 

     this.layout = hl; 

     var leftBlock : SkinnableContainer = myNewContainer(0xFF0000); 
     var rightBlock : SkinnableContainer = myNewContainer(0x00FF00);; 
     var leftLabel : Label = myNewLabel("oranges blackberries bananas kiwis plums apples"); 
     var rightLabel : Label = myNewLabel("apricots peaches lemons pineapples"); 

     leftBlock.addElement(leftLabel); 
     rightBlock.addElement(rightLabel); 

     this.addElement(leftBlock); 
     this.addElement(rightBlock); 
    } 

    private function myNewContainer(backColor : Number) : SkinnableContainer { 
     var container : SkinnableContainer = new SkinnableContainer(); 
     container.layout = new BasicLayout(); 
     container.maxWidth = 150; 
     container.explicitWidth = 150; 
     container.opaqueBackground = backColor; 
     return container; 
    } 

    private function myNewLabel(text : String) : Label { 
     var myLabel : Label = new Label(); 
     myLabel.text = text; 
     myLabel.percentWidth = 100; 
     myLabel.setStyle("color", 0xFFFFFF); 
     myLabel.setStyle("backgroundColor", 0x000000); 
     return myLabel; 
    } 
    } 
}

在我看来像SkinnableContainers（红色和绿色的背景）不关心我应用于t的maxWidth = 150;下摆，但标签（黑色背景上的白色文字）尊重这一点。我期待只看到标签，没有任何过度的红色或绿色背景。是否有一些填充？我错过了什么？

来源

2012-04-24 CamilB

简短的回答

使用backgroundColor风格，而不是opaqueBackground财产。

龙答案

如果更换container.opaqueBackground = backColor与container.setStyle("backgroundColor", backColor)（就像你的标签一样）红色和绿色的区域是正确的，你会期望他们。请注意0是DisplayObject类的纯AS3属性。它与Flex框架无关（直接）。所以你看到的是那些DisplayObject有些重叠，但不是Flex SkinnableContainers。

为了更精确：所述SkinnableContainers自DisplayObject延伸，所以在技术上它们是重叠，但它们的图形和内容被以这样的方式在视觉上（和在除的opaqueBackground使用任何其它可行的方式）排列它们不是。

来源

2012-04-24 15:06:10 RIAstar

这确实解决了它。另外，谢谢你的解释！现在它变得更有意义。 – CamilB 2012-04-24 18:38:31

另外，感谢您修复屏幕截图......我仍然在这里学习。 – CamilB 2012-04-25 06:42:03

柔性容器过长，重叠其他元素

回答

相关问题