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

同样，一个主题问题。因为我正在处理的项目需要扩展mx组件的旧库（例如TitleWindow和TabNavigator），所以我不能直接使用我对Spark皮肤的了解。但是，由于项目是使用默认的Spark主题（我的修改在顶部）而不是Halo主题编程，我显然无法访问我需要的样式（即backgroundImage和contentBackgroundImage，显然需要Halo处于活动状态）。简单地将Halo设置为主题将打破其他事情，其中至少是我自己的主题。正在制定计划来替换旧的库或者至少将它们更好地修补到Flex 4，但是到目前为止，我需要一种方法来设置/设计这些组件而不直接修改它们。无法将标题背景图像添加到TitleWindow的内容区域是荒谬的！我整天搜索互联网的高低，尝试了无数种风格，皮肤，选择器及其组合，没有运气。在使用Flex 4.1 sdk时，没有人知道如何将背景图像添加到mx TitleWindow的内容中吗？！

已邀请:

2 个回复

填盖

实际上，这不是唯一的方法，就像你提到的那样 - 硬编码方式：抱歉。您还可以为TitleWindow组件设置外观以接受背景图像。要创建具有所有必要状态的适当皮肤，您可以复制基础皮肤：spark.skins.spark.TitleWindowSkin为MyTitleWindowSkin，并为其添加一些自定义：在MetaData标记中，您应该输入自定义TitleWindow类的名称：

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

要接受backgroundImage，你应该声明一个变量： [Bindable] private var 背景图片：*; 覆盖

updateDisplayList(unscaledWidth,
unscaledHeight)

方法，内部它初始化这个成员：

backgroundImage =
getStyle("backgroundImage");

在

<!-- layer 2: background fill
-->

部分，在实色填充（

<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"。当然，您不需要将皮肤应用于my | 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>

我的输出仍然如下：

蜂佬渺

如果你的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 个回复

发起人

flex4

background_image

flex_mx

flex_spark

问题状态

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

与内容相关的链接

2 个回复

发起人

flex4

background_image

flex_mx

flex_spark

问题状态