Question

我有一些具有子组件的Skinnable容器，例如图像组件或按钮栏等。似乎当我添加皮肤时，Skinnable容器看起来很棒，但是我的所有子组件看起来都是消失。

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

    <!-- host component -->
    <fx:Metadata>
          [HostComponent("path.to.skin.MySkinnableContainer")]
    </fx:Metadata>

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

    <mx:Image source="@Embed('path.to.skin.AllSkinArt.swf#SkinArt')" includeIn="normal"/>

    <!-- SkinParts
    name=contentGroup, type=spark.components.Group, required=false
    name=contentGroup, type=spark.components.Group, required=false
    -->
 </s:Skin>

将被蒙皮的组件，具有在蒙皮时消失的图像组件。

<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                      width="116" height="74" 
                      addedToStage="onAddedToStage(event)">

<fx:Script>
    <![CDATA[

        [Bindable]
        private var _screenShot:Bitmap;

        public function updateScreenShot(screenShot:Bitmap):void
        {
            _screenShot = screenShot;

        }

        protected function onAddedToStage(event:Event):void
        {
            //do not want the mouse to interact with this object.
            this.mouseEnabled = false;
        }
    ]]>
</fx:Script>

 <s:Image
    width="115"
    height="82"
    x="-8"
    y="-109"
    source="{_screenShot}"/>
 </s:SkinnableContainer>

在CSS文档中，我有以下代码来设置皮肤。

wd|MySkinnableContainer
{
    skinClass: ClassReference("path.to.MySkinnableContainerSkin");
}

在上面的示例中，Skin工作正常，但SkinnableContainer中包含的图像将消失。

Answer 1

看起来你的皮肤缺少contentGroup皮肤部分。这很有趣，对于像SkinnableContainer这样的组件，我会认为内容组是必需的。唉，事实并非如此。

将此添加到您的皮肤：

<s:Group id="contentGroup" />

现在'contentGroup'皮肤部分存在，'SkinnableContainer'应该能够将你的子对象添加到它。

Answer 2

我遇到了同样的问题并且采取了另一种方式，我想问题是Image被认为是皮肤的一部分。在皮肤类中设置源代码使它对我有用。

<s:SkinnableContainer>

<fx:Script>
    <![CDATA[

         [Bindable]
         public var imageSource:String;
         ....................

    ]]>
</fx:Script>
    <s:Image id="sampleImg"/>

</s:SkinnableContainer>

<s:Skin>

    <s:Image id="sampleImg" source="{hostcomponent.imageSource}"/>

</s:Skin>

Flex：当Skinnable Container被剥皮时，子组件会消失

2 个答案: