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}" /> 

，並從你的皮膚類中刪除「標題」屬性（如你可能複製/與其他代碼一起粘貼）。