Flex圖像消失

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 skin部分。

那么如何使我的榜樣發揮作用呢？

從我之前的解釋中可以看到， 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的情況下將Labels添加到其中。

這只是在您需要的情況下對換膚機制的簡短說明。 我建議您對此特定主題進行一些研究，以真正了解其工作原理。