Question

再一次，一个主题问题。因为我正在处理的项目需要扩展mx组件的older libraries（例如TitleWindow和TabNavigator），所以我不能直接使用我对Spark皮肤的了解。但是，由于项目是使用默认的Spark主题（我的修改在顶部）而不是Halo主题编程，我显然无法访问我需要的样式（即backgroundImage和contentBackgroundImage，显然需要Halo处于活动状态）。简单地将Halo设置为主题将打破其他事情，其中至少是我自己的主题。正在制定计划来替换旧的库或者至少将它们更好地修补到Flex 4，但截至目前，我需要一种方法来设置/设计这些组件而不直接修改它们。

无法将标题背景图片添加到TitleWindow的内容区域会很荒谬！我整天都在网上搜索高低，尝试了无数款式，皮肤，选择器，及其组合，没有运气。 使用Flex 4.1 sdk时，没有人知道如何将背景图像添加到mx TitleWindow的内容中？！

Answer 1

实际上，这不是唯一的方法，就像你提到的那样 - 硬编码方式：抱歉。您还可以为TitleWindow组件设置外观以接受背景图像。

要创建具有所有必要状态的相应皮肤，您可以将基础皮肤spark.skins.spark.TitleWindowSkin复制为MyTitleWindowSkin，并为其添加一些自定义：

在MetaData标记中，您应输入自定义TitleWindow类的名称：

<fx:Metadata>
    <![CDATA[ 
        [HostComponent("my.package.CustomTitleWindow")]
    ]]>
</fx:Metadata>

接受backgroundImage，

你应该声明一个变量： [Bindable] private var 将backgroundImage：*;
覆盖了 updateDisplayList(unscaledWidth, unscaledHeight)方法，内部它初始化这个成员： backgroundImage = getStyle("backgroundImage");

在部分中，在填充纯色（<s:Rect id="background"...）之后，你应该把它放在以下片段：

<s:Rect id="backgroundImg" 
    left="1" right="1" 
    top="{topGroup ? topGroup.height : 0}" 
    bottom="{bottomGroup ? bottomGroup.height : 0}">
    <s:fill>
        <!-- BackgroundImage -->
        <s:BitmapFill id="img" source="{backgroundImage}"
            smooth="true" fillMode="scale" />
    </s:fill>
</s:Rect>

接下来，您需要创建一个新类（my.package.CustomTitleWindow），它扩展TitleWindow，设置其外观并绑定backgroundImage样式：

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="my.package.MyTitleWindowSkin">
    <fx:Metadata>
        [Style(name="backgroundImage", type="*")]
    </fx:Metadata>
    <mx:VBox width="100%" height="100%">
        <mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
        <s:Button label="Do something" />
    </mx:VBox>
</s:TitleWindow>

最后进行了一次小测试（在我身边工作得很好，我希望它更接近你所寻找的）：

<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
    <my:CustomTitleWindow title="Window without background image"
        width="100%" height="50%" />
    <my:CustomTitleWindow title="Window with background image"
        width="100%" height="50%" backgroundImage="{IMyConstants.MYLOGO}" />
</s:VGroup>

<强>更新

要从css文件设置皮肤和背景图像，只需要进行一些小的修改：

创建包含内容的CSS文件：

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace my "your.package.*";

my|CustomTitleWindow {
    skin-class: ClassReference("your.package.MyTitleWindowSkin");
}
.twWithBgImage {
    background-image: Embed("icons/logo.png");
}

测试看起来像：

<s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
    <my:CustomTitleWindow title="Window without background image"
        width="100%" height="50%" />
    <my:CustomTitleWindow title="Window with background image"
        width="100%" height="50%" styleName="twWithBgImage" />
</s:VGroup>

，您需要从CustomTitleWindow类中删除皮肤声明：skinClass="your.package.MyTitleWindowSkin"。

当然你不需要将皮肤应用到我的| CustomTitleWindow类，你只能将它用于css类，这样你肯定不需要修改你现有的组件。

更新 - 没有自定义组件

忘记CustomTitleWindow类。

<强> skinnedtw.css

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.twWithBgImage {
    skin-class: ClassReference("your.package.MyTitleWindowSkin");
    background-image: Embed("icons/logo.png");
}

TestApp.mxml

<?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">
    <fx:Style source="assets/skinnedtw.css" />
    <s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
        <s:TitleWindow title="Window without background image"
            width="100%" height="50%">
            <mx:VBox width="100%" height="100%">
                <mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
                <s:Button label="Do something" />
            </mx:VBox>
        </s:TitleWindow>
        <s:TitleWindow title="Window with background image"
            width="100%" height="50%" styleName="twWithBgImage">
            <mx:VBox width="100%" height="100%">
                <mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
                <s:Button label="Do something" />
            </mx:VBox>
        </s:TitleWindow>
    </s:VGroup>
</s:WindowedApplication>

我的输出仍然如下： enter image description here

Answer 2

如果您的mx：TitleWindow中没有明确的成员，那么您应该考虑使用一个Spark BorderContainer作为它的第一个孩子，因为你可以指定一个背景图像。
我在考虑这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" 
    width="400" height="300" backgroundAttachment="">
    <s:BorderContainer backgroundImage="{IMyConstants.MYLOGO}" 
        width="100%" height="100%" backgroundAlpha=".5" />
    <mx:VBox width="100%" height="100%">
        <mx:Text text="{IMyConstants.LOREMIPSUM}" width="100%" height="100%" />
        <mx:Button label="Do something" />
    </mx:VBox>
</mx:TitleWindow>

我希望我理解你的问题，这有帮助。

使用flex 4时，将背景图像添加到mx组件

2 个答案: