Flex自定义组件消失

Question

我对基于组的自定义组件有疑问。实际上，我想创建一个部分组件（带有边框和标题的容器）。我创建了一条路径，以便边框不会隐藏标签（标题）：

<?xml version="1.0" encoding="utf-8"?>
<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/mx">

    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var title:String;
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!-- border --> 
    <s:Path id="border" left="3" right="3" top="5" bottom="5"
            data="M 5 0
            L {this.titleDisplay.left-7} 0
            M {this.titleDisplay.left+this.titleDisplay.width} 0
            L {this.width-5} 0
            C {this.width} 0 {this.width} 0 {this.width} 5
            L {this.width} {this.height-5}
            C {this.width} {this.height} {this.width} {this.height} {this.width-5} {this.height}
            L 5 {this.height}
            C 0 {this.height} 0 {this.height} 0 {this.height-5}
            L 0 5
            C 0 0 0 0 5 0
            ">
        <s:filters>
            <s:GlowFilter alpha="0.5" blurX="10" blurY="10" color="0xffffff"
                          quality="5" strength="6"/>
        </s:filters>
        <s:stroke>     
            <s:SolidColorStroke id="borderStroke" weight="1" color="#ffffff" alpha="0.5"/>
        </s:stroke>
    </s:Path>


    <s:Label id="titleDisplay" maxDisplayedLines="1"
             left="{this.width*0.08}" top="0" bottom="0" minHeight="30"
             verticalAlign="top" textAlign="left" fontWeight="bold"
             text="{title}">
        <s:filters>
            <s:GlowFilter alpha="0.5" blurX="10" blurY="10" color="0xffffff"
                          quality="5" strength="6"/>
        </s:filters>
    </s:Label>

    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" width="95%" height="95%" minWidth="0" minHeight="0">
    </s:Group>

</s:Group>

我的组件在没有子组件的情况下看起来很棒。但是当我尝试类似的操作时：

<component:MySectionComponent>
   <s:Button id="mybtn"/>
</component:MySectionComponent>

除了按钮之外什么也没有显示。我尝试将我的 Group 修改组件更改为 SkinnableContainer，但做了同样的事情。此外，如果我将 Button 直接添加到 MySectionComponent contentGroup 中，它就可以正常工作。我只是不知道是什么原因造成的。

Answer 1

通过将该 Button 放入 MySectionComponent 标记内，您可以有效地覆盖 MySectionComponent 实例的“mxmlChildren”属性的值。因此，基类中的所有子级都消失了，并只替换为一个 Button。

您应该采取什么措施来解决此问题：

• 扩展 SkinnableContainer 而不是 Group
• 创建一个外观类（例如 MySectionComponentSkin），在其中复制 Group 中现在的代码。
• 将皮肤分配给您的 SkinnableContainer

如下所示：

<component:MySectionComponent skinClass="MySectionComponentSkin">
    <s:Button id="mybtn"/>
</component:MySectionComponent>

这里的不同之处在于，当您使用 SkinnableContainer 时，您分配给其 'mxmlChildren' 属性的任何内容都将被传输到其皮肤中 'contentGroup' 的 'mxmlChildren' 属性。

如果您的 MySectionComponent 现在没有任何额外的代码，您可以完全跳过它并直接使用 SkinnableContainer：

<s:SkinnableContainer skinClass="MySectionComponentSkin">
    <s:Button id="mybtn"/>
</s:SkinnableContainer>

但我看到您的组件中有一个“标题”，因此您将需要一些额外的编码。您的 MySectionComponent 应该如下所示：

public class MySectionComponent extends SkinnableContainer {
    [Bindable] public var title;
}

现在您可以从外观中访问该属性。首先确保皮肤知道它的主机组件：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

<fx:Metadata>
    [HostComponent("MySectionComponent")]
</fx:Metadata>

...

然后像这样访问“title”属性：

<s:Label text="{hostComponent.title}" />

并从皮肤类中删除“title”属性（因为您可能将其与其他代码一起复制/粘贴）。