-2

我正在尝试通过创建应用程序皮肤在 flex 4.6 中设置应用程序的 BackgroundImage。

<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.Application")]
</fx:Metadata>

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

<s:Group id="backgroundRect" width="100%" height="100%">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:BitmapImage source="@Embed('assets/css/1.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
</s:Group>  
</s:Skin>

它显示背景图像。但如果我将任何组件/容器放在应用程序中，那么该组件/容器不会显示在应用程序上。一旦我去除皮肤，那么只有应用程序上的组件/容器显示。

4

2 回答 2

1

您的自定义皮肤没有名为“contentGroup”的组

这是 Flex 通常将所有应显示在容器中的 mxml 添加组件放入其中的地方。

尝试添加：

<s:Group id='contentGroup' width='100%' height='100%' />

到你的皮肤。

我认为会这样做。

一般来说，获取原始皮肤文件的副本并更改其中的内容通常比编写新皮肤文件更容易。这样，您可以确保不会忘记任何重要的事情。

于 2013-07-03T08:53:54.723 回答
0

这是我的带有渐变背景的应用皮肤：

<?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:fb="http://ns.adobe.com/flashbuilder/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        alpha.disabledWithControlBar="0.5"
        alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.Application")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        <![CDATA[
            import flash.filters.DropShadowFilter;

            private static const W:uint = 700;
            private static const H:uint = 525;

            private static const COLORS:Array = [0xFFFFFF, 0xFFFFFF];
            private static const ALPHAS:Array = [1, 0];
            private static const RATIOS:Array = [0, 255];
            private static const SHADOW:Array = [new DropShadowFilter(0, 0, 0x000000, 1.0, 12.0, 12.0, 1.0, 3, true)];

            private var _matrix:Matrix = new Matrix();

            private function drawBG(w:Number, h:Number):void {
                _bgShading.graphics.clear();
                _matrix.createGradientBox(w * 1.2, h * 2.2, 0, -w * 0.1, -h * 0.8);
                _bgShading.graphics.beginGradientFill(GradientType.RADIAL,
                    COLORS,
                    ALPHAS,
                    RATIOS,
                    _matrix,
                    SpreadMethod.PAD,
                    InterpolationMethod.LINEAR_RGB,
                    0);
                _bgShading.graphics.drawRect(0, 0, w, h);
                _bgShading.graphics.endFill();

                _bgShading.filters = SHADOW;

                _bgTexture.graphics.clear();
                _bgTexture.graphics.beginFill(0x99CC99);
                _bgTexture.graphics.drawRect(0, 0, w, h);
                _bgTexture.graphics.endFill();

                _bgShading.blendMode = BlendMode.OVERLAY;
            }        

            public function setBackgroundSize(w:uint=W, h:uint=H):void {
                var screenRatio:Number = w / h;
                var stageRatio:Number = stage.stageWidth / stage.stageHeight;
                var ratio:Number = screenRatio / stageRatio;

                // ratio > 1 if screen is broader than stage
                mainGroup.width = stage.stageWidth * Math.max(1, ratio);

                drawBG(mainGroup.width, H);
            }

            public function showBackground(b:Boolean):void {
                _bgTexture.visible = b;
                _bgShading.visible = b;
            }
        ]]>
    </fx:Script>

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

    <mx:UIComponent id="_bgTexture" />
    <mx:UIComponent id="_bgShading" />

    <s:Group id="mainGroup" x="0" y="0" width="700" height="525">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>

        <s:Group id="contentGroup" width="700" height="100%" minWidth="0" minHeight="0" />

        <s:Group id="topGroup" minWidth="0" minHeight="0"
                    includeIn="normalWithControlBar, disabledWithControlBar" >

            <s:Rect left="1" right="1" top="1" bottom="1" >
               <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="#66BBEE" />
                        <s:GradientEntry color="#3399CC" />
                    </s:LinearGradient>
               </s:fill>
            </s:Rect>

            <s:Rect left="2" right="2" bottom="0" height="1" alpha="0.5">
                <s:fill>
                    <s:SolidColor color="#333333" />
                </s:fill>
            </s:Rect>

            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="6" paddingRight="6" paddingTop="6" paddingBottom="6" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>

    </s:Group>
</s:Skin>
于 2013-07-03T17:19:13.140 回答