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>

如何更换flex 3中的图像？

3 个答案: