Flex Repeater(循环组件)

Repeater 顾名思义,Repeat就是重复的意思, Repeater 就是用来重复的控件
Repeater 会根据数据源中对象的多少来产生多少个子项,生成的子项全部是以数组形式存在的 

实现图片切换

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			[Bindable]
			private var _arrayCollection:ArrayCollection = new ArrayCollection(["../img/images3.jpg","../img/460.jpg","../img/imagesCAV1ZQPW.jpg","../img/images52.jpg"]);
		
			private function clickImage(e:Event):void{
				showImage.source = e.currentTarget.getRepeaterItem();
			}
		]]>
	</mx:Script>	
	<mx:VBox x="198" y="200">
		<mx:VBox borderStyle="solid" borderThickness="1" paddingTop="2" paddingRight="2" paddingBottom="2" paddingLeft="2">
			<mx:Image id="showImage" width="343" height="196" x="211" y="173" maintainAspectRatio="false"/>
		</mx:VBox>
		
		<mx:HBox borderSides="1" width="375" height="122" borderColor="0xFF0000" >
			<mx:Repeater dataProvider="{_arrayCollection}" id="repArray">
					<mx:VBox buttonMode="true" borderThickness="1" borderStyle="solid" paddingTop="2" paddingRight="2" paddingBottom="2" paddingLeft="2">
						<mx:Image source="{repArray.currentItem}" width="100" height="100" maintainAspectRatio="false" click="clickImage(event)"/>
					</mx:VBox>
			</mx:Repeater>	
		</mx:HBox>
	</mx:VBox>
</mx:Application>


buttonMode="true"==> 显示手型鼠标
maintainAspectRatio="false"==> 填充

你可能感兴趣的:(Flex,Repeater)