apache-flex - 弹性 4 : Build a Group with a background

Question

我正在尝试构建一个简单的组件，扩展 spark.components.Group 以具有背景颜色，更具体地说是一个 spark.primitives.Rect 组件被拉伸(stretch)以填充背景。

到目前为止，这是我想出的:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
    <fx:Metadata>
        [DefaultProperty(name="content")]
    </fx:Metadata>

    <s:Rect id="background" width="100%" height="100%">
        <s:fill>
            <s:SolidColor color="#990000"/>
        </s:fill>
    </s:Rect>

    <s:Group id="container"/>

    <s:filters>
        <!-- For good measure ;) -->
        <s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
    </s:filters>

    <fx:Script>
        <![CDATA[
            public function set content(value:Array):void {
                this.container.mxmlContent = value;
            }
        ]]>
    </fx:Script>
</s:Group>

好的，所以这里的逻辑基本上是有道理的，对吧？在 MXML 中声明的所有子项都进入称为“容器”的组。那工作得很好。但是，当我运行下面的示例时，布局完全是 fubar。

<s:VGroup>
    <!-- This is the component described above -->
    <components:MessageContainer id="component" width="100" height="100"/>
    <mx:Slider/>
    <mx:Slider/>
    <mx:ColorPicker/>
</s:VGroup>

这是它的样子:



我在这里缺少什么吗？也许我需要重写的方法？

Answer 1

奇怪的。我只是求助于制作一个皮肤实现并将其应用到一个 SkinnableContainer。我也在使用 Flex 4 的 Beta 2 版本进行编译。确实很奇怪。