Flash Flex容器增长过快，与其他元素重叠

事情是这样的。我正在使用纯AS3对一些Flex组件进行一些特殊的自动布局，当我发现一些SkinnableContainer比它们的内容更大时，即使它们有0个填充，并且里面的布局是BasicLayout（即“完全手动”布局）

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

截图

Main.mxml

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

---

在我看来，SkinnableContainers（红色和绿色背景）并不关心

maxWidth=150我应用于它们，但是标签（黑色背景上的白色文本）尊重这一点。我希望只看到标签，没有任何过度延伸的红色或绿色背景。是否涉及一些填充物？我遗漏了什么吗？
简短回答

使用
backgroundColor
样式，而不是
opaqueBackground
属性

长答案

如果将该
container.opaqueBackground=backColor
替换为
container.setStyle（“backgroundColor”，backColor）
（就像您对标签所做的那样），则红色和绿色区域正好位于您期望的位置

请记住，这是DisplayObject类的纯AS3属性。它与Flex框架（直接）无关。因此，您看到的是，这些显示对象有些重叠，但Flex SkinnableContainers没有重叠

更准确地说：SkinnableContainers从DisplayObject扩展而来，因此从技术上讲它们是重叠的，但是它们的图形和内容在视觉上是对齐的（除了使用
opaqueBackground
），其他任何实际的方式都是不对齐的。
这确实解决了这个问题。还有，谢谢你的解释！现在它更有意义了。另外，谢谢你修复了截图。。。我还在这里学习。
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;
    }
  }
}