柔性图像消失

Question

我实际上只是学习flex，而且我对某些部分感到困惑。问题是我在皮肤中设置的背景图像工作正常，直到我添加更多元素，然后它变成白色背景而不是将元素放在顶部。

我开始认为我误解了它是如何工作的。我不明白为什么我需要让<s:Group id="contentGroup" />首先显示图像......这看起来像是一个多余的标签？

这是主要代码和皮肤：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="800" height="523" maxWidth="800" maxHeight="523" initialize="httpService.send()" showStatusBar="false" backgroundColor="white" backgroundAlpha="1">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            public var returnData:ArrayCollection;

            protected function httpService_handler(event:ResultEvent):void{
                returnData = event.result.people.person;

            }
        ]]>
    </fx:Script>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

    </fx:Style> 
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:HTTPService id="httpService" url="" result="httpService_handler(event)" />
    </fx:Declarations>

    <s:BorderContainer borderVisible="false" mouseDown="nativeWindow.startMove();" skinClass="MainStyle" width="800" height="523" id="container" >
        <s:HGroup left="100" top="100" id="newsSlider" width="100" height="100">
            <s:Label>
                <s:text>Test</s:text>
            </s:Label>
        </s:HGroup>
    </s:BorderContainer>
</s:WindowedApplication>

<?xml version="1.0" encoding="utf-8"?>
<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("spark.components.BorderContainer")]
    </fx:Metadata>

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

    <!-- SkinParts
    name=contentGroup, type=spark.components.Group, required=false
    -->
    <s:Group id="contentGroup" width="800" height="523">
        <s:BitmapImage id="bg" source="@Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
    </s:Group>
</s:Skin>

Answer 1

contentGroup是SkinnableContainer组件的唯一“skinPart”，它是BorderContainer的基类。它不是一个必需的skinpart（编译器会在你以前的版本中没有你皮肤上的skinpart的情况下抛出错误）。

什么是skinPart？

这是主机组件与其皮肤之间的契约。基本上，主机组件正在指示皮肤（通过元数据）它需要它以及这个和那个元素（皮肤部分）才能正常运行。其中一些元素是组件运行所必需的，有些是可选的。

contentGroup skinpart是什么？

它是SkinnableContainer将添加其嵌套元素的容器元素。举个例子：

<s:SkinnableContainer>
    <s:Label text="hello"/>
</s:SkinnableContainer>

在幕后，Label实例将被添加到SkinnableContainer皮肤的contentGroup皮肤部分。

那我该如何让我的例子起作用呢？

正如您之前解释的那样，contentGroup元素只是皮肤中的placeHolder。如果要将“chrome”添加到自定义组件，请将其添加到该组之外：

<s:BitmapImage id="bg" source="@Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />

<s:Group id="contentGroup" width="800" height="523"/>

这将显示contentGroup后面的图像，现在您的标签将被添加到其中，而不会删除您在那里声明的BitmapImage。

这只是您需要的皮肤机制的简短说明。我建议你对这个特定主题做一些研究，以真正了解它的工作原理。