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

Posted 2023-02-23

【中文标题】Flex 容器增长过多，与其他元素重叠

【英文标题】：Flex container grows too much, overlapping other elements

【发布时间】：2012-05-05 04:11:38

【问题描述】：

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

这是屏幕截图和代码。这个小测试创建了一个应用程序并将布局设置为 Horizo​​ntalLayout。然后，在 Application 容器内，我创建了两个 SkinnableContainer，每个都包含一个带有一些文本的标签。我将 SkinnableContainers 的最大宽度设置为 150 像素，并将其中的标签设置为其父级的 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;，但标签（黑色背景上的白色文本）尊重这一点。我期待只看到标签，没有任何过度延伸的红色或绿色背景。是否涉及一些填充？我错过了什么吗？

【参考方案1】：

简答

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

长答案

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

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

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

【讨论】：

这确实解决了它。另外，谢谢你的解释！现在更有意义了。

另外，感谢您修复屏幕截图...我还在学习。