1

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

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

截屏

布局截图

主.mxml

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

主应用程序.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;我应用于它们的内容，但标签（黑色背景上的白色文本）尊重这一点。我期待只看到标签，没有任何过度延伸的红色或绿色背景。是否涉及一些填充？我错过了什么吗？

4

1 回答 1

2

简短的回答

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

长答案

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

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

更准确地说：SkinnableContainers 是从 DisplayObject 扩展而来的，因此从技术上讲它们是重叠的，但它们的图形和内容以这样一种方式对齐，即在视觉上（以及除使用 之外的任何其他实际方式opaqueBackground）它们不是。

于 2012-04-24T15:06:10.207 回答