如何替换flex 3中的图像？

Question

在我的 Flex 应用程序中，我维护 5 个图像。当用户单击“下一步”按钮时，它应该显示一个图像，即“image1”。如果再次单击该按钮，则 image1 应替换为 image2，依此类推。我基本上遵循“image.visible”方法。但图像并排显示。我认为这不是正确的程序。还有其他选择吗？预先感谢

---

这是我的代码。我将所有图像和按钮保存在 mx:panel 中。即使我使用了不起作用的 x 和 y 位置。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel 
title = 'Learn and Test your Knowledge'
height = '80%'
paddingBottom = '10' paddingTop = '10' 
paddingLeft = '10' paddingRight = '10' 
borderAlpha='0.20'    fontFamily="Verdana" fontSize="15" color="#F30C32"  backgroundImage="@Embed(source='../images/lad.jpg')" width="413" x="139">
<mx:Script>

    <![CDATA[
 public function nextEvent():void
      {
      // here i should write next button code
      }

    ]]>
</mx:Script>

<mx:Image source="../images/image1.jpg" visible="true" id="image1" />

<mx:Image source="../images/image3.jpg" visible="true" id="image2"/>
<mx:Image source="../images/image3.jpg" visible="true" id="image3"/>

<mx:Button id="next"  visible="false" click="nextEvent()">

</mx:Button>

Answer 1

如果您只显示一张图像，最好的方法是仅使用一个图像组件。您可以使用嵌入图像创建数组或向量，并引用它来更改图像组件上的源属性。这是一个示例：（下面的代码适用于任何布局/容器）

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Image id="image" click="imageClick()" source="{new images[0]()}" />

    <mx:Script>
        <![CDATA[
            [Embed(source="assets/1.png")]
            private var image1:Class;

            [Embed(source="assets/2.png")]
            private var image2:Class;

            [Embed(source="assets/3.png")]
            private var image3:Class;

            private var images:Array = [image1, image2, image3];

            private var imageIndex:uint = 0;

            protected function imageClick():void
            {
                imageIndex++;
                if(imageIndex == images.length) imageIndex = 0;

                image.source = new images[imageIndex]();
            }

        ]]>
    </mx:Script>          
</mx:Canvas>

Answer 2

将图像的 x 和 y 位置指定为相同并调整它们的可见性。它肯定会起作用。

Answer 3

ViewStack 是我的选择，它非常适合这种场合。
它一次只显示一个组件，对于下一个操作，它将自动用新组件覆盖以前的内容。

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">

        <mx:Canvas id="one" click="myViewStack.selectedChild=two;">
            <mx:Image source="assets/1.png" />
        </mx:Canvas>

        <mx:Canvas id="two" click="myViewStack.selectedChild=three;">
            <mx:Image source="assets/2.png" />
        </mx:Canvas>

        <mx:Canvas id="three" click="myViewStack.selectedChild=four;">
            <mx:Image source="assets/3.png" />
        </mx:Canvas>

        <mx:Canvas id="four" click="myViewStack.selectedChild=five;">
            <mx:Image source="assets/4.png" />
        </mx:Canvas>

        <mx:Canvas id="five" click="myViewStack.selectedChild=one;">
            <mx:Image source="assets/5.png" />
        </mx:Canvas>

    </mx:ViewStack>