Flex Slide Show-优快云博客

本文介绍了一个使用Adobe Flex实现的动态界面案例。该案例通过不同的状态（normal、b1、b2、b3）来改变BorderContainer的尺寸与外观，并采用HorizontalLayout布局使元素居中显示。当BorderContainer被点击时，当前状态会切换到被点击的BorderContainer对应的ID。案例展示了如何通过编程方式响应用户交互并更新UI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 27, 2010 file:BorderContainerDemo2.mxml  author:Michael -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   viewSourceURL="srcview/index.html" backgroundColor="0">
	<s:states>
		<s:State name="normal"/>
		<s:State name="b1"/>
		<s:State name="b2"/>
		<s:State name="b3"/>
	</s:states>
	<s:layout>
		<s:HorizontalLayout verticalAlign="middle"
							horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			protected function bordercontainer_clickHandler(event:MouseEvent):void
			{

				this.currentState=event.currentTarget.id;

			}

			protected function hg_creationCompleteHandler(event:FlexEvent):void
			{
				for (var i:int; i < this.hg.numElements; i++)
				{
					BorderContainer(this.hg.getElementAt(i)).addEventListener(MouseEvent.CLICK, bordercontainer_clickHandler);
				}
			}
		]]>
	</fx:Script>

	<s:HGroup gap="0"
			  id="hg"
			  creationComplete="hg_creationCompleteHandler(event)">

		<s:BorderContainer width="50"
						   width.b1="400"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu1.png')"
						   backgroundImageFillMode="clip"
						   id="b1"
						   resizeEffect="Resize"/>

		<s:BorderContainer width="50"
						   width.b2="400"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu2.png')"
						   backgroundImageFillMode="clip"
						   id="b2"
						   resizeEffect="Resize"/>

		<s:BorderContainer width="400"
						   width.b1="50"
						   width.b2="50"
						   height="300"
						   cornerRadius="5"
						   backgroundImage="@Embed(source='images/menu3.png')"
						   backgroundImageFillMode="clip"
						   id="b3"
						   resizeEffect="Resize"/>
	</s:HGroup>

</s:Application>