柔性容器過長，重疊其他元素

這是事情。當我發現某些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

柔性容器過長，重疊其他元素

回答

相關問題