Question

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

<?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'属性的值。因此，基类中的所有孩子都会消失，只用一个按钮替换。

您应该采取哪些措施来解决此问题：

扩展SkinnableContainer而不是Group
创建一个皮肤类（例如MySectionComponentSkin），您可以在其中复制现在在您的组中的代码。
将皮肤分配给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'属性（因为您可能将其与其他代码一起复制/粘贴）。

Flex自定义组件消失

1 个答案: