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代替
集团
• 创建一个皮肤类（例如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> 

... 

然后访问“标题”属性，像这样：

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

，并从你的皮肤类中删除“标题”属性（如你可能复制/与其他代码一起粘贴）。