在 Flex 4.5 中设置背景图像答案

【问题标题】：Setting background image in Flex 4.5在 Flex 4.5 中设置背景图像
【发布时间】：2011-10-02 07:49:40
【问题描述】：

我在 Flex 4.5 中编写了一个自定义皮肤，它显示了一个自定义图像。我想要这个作为我的背景图片，那么如何将这个皮肤设置为应用程序容器？

谢谢

【问题讨论】：

您是否设置了Application 的skinClass 属性？

标签： apache-flex flex4.5

【解决方案1】：

您可以像任何其他组件一样为应用程序设置皮肤，当然是 skinClass 属性！ :)

怎么做？

这是我的 app.mxml：

<?xml version="1.0"?>
<s:Application 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="MyAppSkin">      
</s:Application>

现在，我在这里制作了一个简单的皮肤，背景图像被拉伸以适应！

我的 MyAppSkin.mxml 文件的完整源代码在这里（太大，无法在此处发布）：http://pastebin.com/Hwu9tc1Y

这是重要的部分（只有部分是真正定制的 - 其余部分是标准的）：

    <s:Group id="backgroundRect">
        <s:BitmapImage source="@Embed('beach.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
    </s:Group>

当您应用皮肤时会发生什么，它会通过 id 搜索某些元素（backgroundRect 是我们感兴趣的元素）并应用它们。要自定义，只需更改您想要的皮肤部分。我用图片替换了这个组的标准背景纯色填充。

小菜一碟先生！

有意义吗？

【讨论】：

如何将其转换为使用 AS 方法？从我从文档中看到的，应该避免使用基于 mxml 的皮肤。 “移动皮肤比桌面皮肤更轻量。因此，它们有很多不同之处；例如： • 移动皮肤是用 ActionScript 编写的。仅 ActionScript 的皮肤在移动设备上提供最佳性能。”

【解决方案2】：

这个怎么样：

<s:BitmapImage source="@Embed('paper1.jpg')" 
  left="0" right="0"  
  width="100%" height="100%" 
/>

【讨论】：

我把它放在应用程序的标记中，但背景没有改变？
您确定 paper1.jpg 存在并且位于 src 文件夹中吗？

【解决方案3】：

设置背景图片并添加组件

    <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
        <s:List>
            <s:ArrayCollection>
                <fx:String>One</fx:String>
                <fx:String>Two</fx:String>
                <fx:String>Three</fx:String>
                <fx:String>Four</fx:String>
                <fx:String>Five</fx:String>
            </s:ArrayCollection>
        </s:List>
    </mx:VBox>
</s:Group>

【讨论】：