0

我知道我要问的可能太简单了,但我一直无法找到解决问题的方法。

我正在开发一个 AIR 应用程序。我有一个自定义皮肤,用于火花组件的窗口应用。在那个皮肤中,我添加了一个位图图像来为窗口应用程序设置背景。

另外,我有一个名为“header”的自定义组件,它的作用是绘制一些表格标题。

现在,如果我<ui:header width="100%" and height="40"\>在位图图像之后的皮肤中添加标题,那么标题会按预期显示。但是,如果我将标题放在窗口应用程序中,那么它会显示在位图图像下方,除非删除位图图像,否则无法看到。

我试图通过相应地更改位图图像和标题组件的深度来解决此问题,以使它们以正确的顺序出现,但这对我不起作用。

如果你有想法,请帮帮我。谢谢

这是代码的一部分

`

<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"                           skinClass="ui.uiskin"
height = "728" width="910"                     
xmlns:ui="ui.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <ui:header x="0" y="{.0258*height}" depth="0"
               height="{0.0774*height}" width="100%"/>
</s:WindowedApplication>

`

uiskin 是

`

<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" xmlns:ui="com.youspin.components.ui.*"
        depth="-10">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.WindowedApplication")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>
    <!-- states -->
    <s:states>
        <s:State name="disabledAndInactive" />
        <s:State name="normalAndInactive" />
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <s:BitmapImage source="@Embed('../../images/ui/background.png')" depth="-10"/>

    <s:TitleBar left="0" right="0" top="1" 
                height="{0.0258*height}" 
                skinClass="titleSkin"/>

    <ui:header x="0" y="{.0258*height}" depth="0"
               height="{0.0774*height}" width="100%"/>  

</s:Skin>

`

标题是

`

<?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"
         width="100%" height="100%"
         >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Rect width="100%" height="{.04*height}">
        <s:fill>
            <s:SolidColor color="black"/>
        </s:fill>
    </s:Rect>

    <s:Rect width="100%" height="100%"
            left="0" top="2"
            alpha=".2"
            >
        <s:fill>
            <s:SolidColor color="black"/>
        </s:fill>
    </s:Rect>

    <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"
             width="100%" height="100%"
             top="2" left="0"
             id="headingsGroup"
             >
        <mx:Image source="@Embed('../../images/header/logo.png')" 
                  width="{0.2*headingsGroup.width}"
                  left="{0.015*headingsGroup.width}" top="{0.04*headingsGroup.height}"/>

        <!-- left line drop -->
        <s:Rect left="{.25*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>

        <!-- middle line drop -->
        <s:Rect left="{.50*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>
        <!-- side line drop -->
        <s:Rect left="{.75*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>

        <s:Label text="artist"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{-0.125*headingsGroup.width}"
                 styleName="balonez"/>
        <s:Label text="song"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{0.125*headingsGroup.width}"
                 styleName="balonez"/>
        <s:Label text="album"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{0.375*headingsGroup.width}"
                 styleName="balonez"/>

        <!-- bottom line -->
        <s:Rect left="{.25*headingsGroup.width}" top="{.22*headingsGroup.height}"
                width="{.75*headingsGroup.width}" height="2">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>
    </s:Group>


    <fx:Style>
        @font-face {
            src:url("../../fonts/balonez fantasia.ttf");
            fontFamily: myFontFamily;
            advancedAntiAliasing:true;
        }

        .balonez{
            font-family:myFontFamily;
            font-size:25;
        }
    </fx:Style>
</s:Group>

`

代码的某些部分未在此处显示,但我想以上内容应该让您了解我正在尝试做什么。

我想要做的是我的windowedapplication 有一个自定义皮肤,即uiskin。还有一个单独的组件称为“标题”。在 uiskin.mxml 中,我添加了一个位图图像以将其用作 windowedapplication 的背景。在窗口应用程序中,我添加了标题。这样做会导致标题出现在图像后面。

现在,我所做的是在位图图像之后的 uiskin 中添加标题。现在,这使标题出现在位图图像上方。但是,我实际上想将标题放在窗口应用程序中,而不是在自定义皮肤中。有没有办法做到这一点。

4

3 回答 3

1

你能给我们看一些代码吗?因为当您使用 MXML 将组件添加到显示列表时,写入它们的顺序很重要。例如,以下代码将添加标签,然后添加图像。如果两个组件的坐标重叠,则图像将覆盖标签。flex 组件的 mxml 部分从上到下运行。看 ?

<s:Label
    id="labelContent"
    width="100%" height="100%"/>
<s:Image id="imageContent" horizontalCenter="0" verticalCenter="0"/>
于 2011-09-06T06:24:50.007 回答
1

我找到了我的问题的答案。所需要的只是一个组标签,以使窗口应用程序的内容显示在窗口应用程序皮肤中设置的图像之上

<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />

还要注意保留 id,当我删除 id 时它对我不起作用。另外,如果有人需要,这里是链接。

于 2011-09-15T09:07:56.847 回答
0

我了解您发布的一些内容。如果您先放置图像,然后放置标题,则标题会隐藏图像。我的解决方案是这个

有一个 100% 100% 高度宽度的 Hgroup

<s:HGroup width="100%" height="100%">
     <ui:header width="100%" height="40"\>
     <s:Image width="100%" height="60%"\>
</s:HGroup>
于 2011-09-06T07:44:02.420 回答