フレックスコンテナが大きくなり過ぎ、他の要素が重なって表示される

Question

ここが問題です。私はいくつかのFlexコンポーネントの自動レイアウトを行うために純粋なAS3を使用していますが、SkinnableContainerがコンテンツよりも大きくなっていることが判明した場合、0のパディングがあり、その内部のレイアウトがBasicLayout（つまり、 ）。

ここにスクリーンショットとコードを示します。この小さなテストはアプリケーションを作成し、レイアウトをHorizo​​ntalLayoutに設定します。次に、Applicationコンテナの内部に、2つのSkinnableContainerを作成します。それぞれにはテキストを含むLabelが含まれています。私はSkinnableContainersを最大150pxの幅に設定し、ラベル内には親の100％の幅を持つように設定しました。

スクリーンショット

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;です。ラベルは黒い背景に白いテキストがこれを尊重します。私は、過度に伸びた赤や緑の背景なしに、ラベルのみを見ることを期待していました。いくつかのパディングが関わっていますか？私は何か不足していますか？

Answer 1

短い答え

代わりopaqueBackground財産のbackgroundColorスタイルを使用してください。

長い答え

あなたは彼らがあることを期待する場所container.setStyle("backgroundColor", backColor)とcontainer.opaqueBackground = backColor（あなたがラベルにやったように）赤と緑のゾーンが正しいことを交換する場合。

opaqueBackgroundは、DisplayObjectクラスの純粋なAS3プロパティです。 Flexフレームワークと（直接的に）何も関係ありません。だからあなたが見るものは、それらのDisplayObjectsはやや重なっていますが、Flex SkinnableContainersはありません。

は、より正確には：SkinnableContainersはのDisplayObjectから延びるので、技術的に彼ら重複であるが、それらのグラフィック及び内容は、それらが視覚的（及びopaqueBackgroundの使用以外の任意の他の実用的な方法で）ように配列されていますそうではありません。