Flexの2つのコンポーネント間の深さの問題
https://stackoverflow.com/questions/7315479
-
26-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私が尋ねようとしていることはあまりにも単純かもしれないことを知っていますが、私は自分の問題の解決策を見つけることができませんでした。
エアアプリを開発しています。 SparkコンポーネントのWindowedApplication用のカスタムスキンがあります。その肌に、WindowedApplicationの背景を設定するためにBitMapImageを追加しました。
また、「ヘッダー」と呼ばれるカスタムコンポーネントがありますが、それが行うのはいくつかのテーブルヘッダーを描画することです。
ここで、ヘッダーを追加すると <ui:header width="100%" and height="40"\>BitMapimageの直後の皮で、ヘッダーが表示されるように表示されます。ただし、WindowedApplication内にヘッダーを配置すると、ビットマピメージの下に表示されます。ビットマピメージが削除されない限り表示されません。
適切な順序で表示するために、それに応じてビットマピマージとヘッダーコンポーネントの深さを変更することでこの問題を修正しようとしましたが、これは私にとっては機能しません。
あなたがアイデアを持っているなら、私を助けてください。ありがとう
これがコードのビットです
`
<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の背景として使用するためにBitMapimageを追加しました。そして、WindowedApplication内でヘッダーを追加しました。これを行うと、ヘッダーが画像の後ろに表示されます。
今のところ、私がやったことは、bitmapimageの後にuiskin内にヘッダーを追加することです。これで、これにより、ヘッダーがBitMapimageの上に表示されます。しかし、実際には、カスタムスキン内ではなく、ウィンドウエダプリケーション内にヘッダーを配置したいと考えています。これを行う方法はありますか。
解決 2
私の質問に対する答えを見つけました。必要なのは、WindowedApplicationスキンに設定された画像の上にウィンドウ付きアプリケーションのコンテンツを表示するためのグループタグだけでした
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />
IDを維持するようにも注意してください。IDを削除したときには機能しませんでした。また、 これがリンクです 誰かがそれを必要とするなら。
他のヒント
コードを見せてもらえますか？ MXMLを使用してディスプレイリストにコンポーネントを追加すると、それらを書く順序が重要であるためです。たとえば、次のコードにラベルが追加されます。 その後 画像。 2つのコンポーネントの座標が重複する場合、画像はラベルをカバーします。フレックスコンポーネントのMXML部分は、上から下に走ります。見る ？
<s:Label
id="labelContent"
width="100%" height="100%"/>
<s:Image id="imageContent" horizontalCenter="0" verticalCenter="0"/>
私はあなたが投稿したもののいくつかを理解しています。画像を配置してからヘッダーを配置すると、ヘッダーは画像を隠します。私の解決策はこれです
100％100％の高さの幅のHGROUPを持っている
<s:HGroup width="100%" height="100%">
<ui:header width="100%" height="40"\>
<s:Image width="100%" height="60%"\>
</s:HGroup>
