更改每个州的背景图像

发布于 2024-09-03 18:54:36 字数 445 浏览 2 评论 0原文

我有一个具有特定背景图像的组件。代码如下所示：

<mx:backgroundImage>@Embed(source='img1.png')</mx:backgroundImage>

<mx:states>
  <mx:State name='state2'>
    <mx:SetStyle name="backgroundImage">
      <mx:value>@Embed(source='img2.png')</mx:value>
    </mx:SetStyle>
  </mx:State>
</mx:states>

但是当我将状态更改为 'state2' 时，它实际上并没有改变任何内容。

我在这里遗漏了什么具体内容吗？

原文

I have a Component that has a specific background image. The code looks like:

<mx:backgroundImage>@Embed(source='img1.png')</mx:backgroundImage>

<mx:states>
  <mx:State name='state2'>
    <mx:SetStyle name="backgroundImage">
      <mx:value>@Embed(source='img2.png')</mx:value>
    </mx:SetStyle>
  </mx:State>
</mx:states>

But when I change the state to 'state2', it doesn't actually change anything.

Am I missing anything specific here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜司空 2024-09-10 18:54:36

默认目标是主应用程序。
因此，您实际上是在 state2 中设置整个应用程序的背景，而不是组件的背景。
这是一个使用 VBox 的示例

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{VBox1}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:VBox id="VBox1" x="0" y="0" width="50%" height="50%">
    <mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
</mx:VBox>

</mx:Application>

。此外，如果您使用的是 Flex 3 Builder，您可以随时切换到设计模式来查看从基本状态到新状态的更改。它应该位于右上角。

组件编辑

主文件

<cbsh:BackSwitch>

</cbsh:BackSwitch>

</mx:Application>

组件

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{this}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
<mx:Button x="437" y="269" label="Switch!" click="currentState='state2';"/>
</mx:VBox>

The default target is the main app.
So you are actually setting the background of the entire app in state2 and not the Component.
Here is an example with the VBox

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{VBox1}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:VBox id="VBox1" x="0" y="0" width="50%" height="50%">
    <mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
</mx:VBox>

</mx:Application>

Also if you are using Flex 3 Builder you can always switch to Design mode to see changes from Base state to a new state. It should be in the top right corner.

EDIT for components

Main file

<cbsh:BackSwitch>

</cbsh:BackSwitch>

</mx:Application>

Component

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{this}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
<mx:Button x="437" y="269" label="Switch!" click="currentState='state2';"/>
</mx:VBox>

回复收藏 0 原文