1

つまりね。一部の Flex コンポーネントの特別な自動レイアウトを実行するために純粋な AS3 を使用しています。一部の SkinnableContainer が、パディングが 0 で、その中のレイアウトが BasicLayout (つまり、「完全手動」レイアウト) であっても、コンテンツよりも大きくなることがわかりました。 ）。

これがスクリーンショットとコードです。この小さなテストでは、アプリケーションを作成し、レイアウトを Horizo​​ntalLayout に設定します。次に、Application コンテナー内に 2 つの SkinnableContainers を作成し、それぞれにテキストを含む Label を含めます。SkinnableContainers の幅を最大 150 ピクセルに設定し、その中のラベルの幅を親の 100% に設定しました。

スクリーンショット

レイアウトのスクリーンショット

メイン.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;が、ラベル (黒の背景に白いテキスト) はこれを尊重します。過度に拡張された赤や緑の背景なしで、ラベルのみが表示されることを期待していました。いくつかのパディングが含まれていますか？何か不足していますか？

4

1 に答える 1

2

簡潔な答え

プロパティbackgroundColorの代わりにスタイルを使用してください。opaqueBackground

長い答え

container.opaqueBackground = backColorこれを(ラベルで行ったのと同じように)に置き換えるとcontainer.setStyle("backgroundColor", backColor)、赤と緑のゾーンが期待どおりの場所になります。

opaqueBackgroundは、DisplayObject クラスの純粋な AS3 プロパティであることに注意してください。Flex フレームワークとは (直接) 関係ありません。ご覧のとおり、これらの DisplayObject は多少オーバーラップしていますが、Flex SkinnableContainers はオーバーラップしていません。

より正確に言えば、SkinnableContainers は DisplayObject から拡張されているため、技術的にはオーバーラップしていますが、それらのグラフィックスとコンテンツは、視覚的に (および の使用を除く他の実用的な方法でopaqueBackground) 整列されていません。

于 2012-04-24T15:06:10.207 に答える