Flex容器增长太多，与其他元素重叠

Question

这就是事情。我使用纯AS3做一些Flex组件的特殊自动布局，当我发现一些SkinnableContainers比它们的内容大时，即使它们有0填充并且它们内部的布局是BasicLayout（即“全手动”布局）。

这是截图和代码。这个小测试创建一个Application并将布局设置为Horizo​​ntalLayout。然后，在Application容器中，我创建了两个SkinnableContainers，每个包含一个带有一些文本的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（红色和绿色背景）并不关心我应用于它们的maxWidth = 150;，但标签（黑色背景上的白色文字）尊重这一点。我期待只看到标签，没有任何过度扩展的红色或绿色背景。是否涉及一些填充？我错过了什么吗？

Answer 1

简短回答

使用backgroundColor样式代替opaqueBackground属性。

答案很长

如果您将container.opaqueBackground = backColor替换为container.setStyle("backgroundColor", backColor)（就像使用标签一样），红色和绿色区域就在您期望的位置。

请记住opaqueBackground是DisplayObject类的纯AS3属性。它与Flex框架无关（直接）。所以你看到的是那些DisplayObjects有些重叠，而不是Flex SkinnableContainers。

更确切地说：SkinnableContainers从DisplayObject扩展，因此技术上它们 重叠，但它们的图形和内容以可视方式（以及除了使用之外的任何其他实际方式）对齐opaqueBackground）他们不是。