flex4基于datGroup自定义布局实例

最新推荐文章于 2025-04-10 17:21:46 发布

最新推荐文章于 2025-04-10 17:21:46 发布 · 166 阅读

文章标签：

#浏览器 #XML

flex布局与皮肤专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex创建的自定义圆形布局(CircularLayout)，该布局将DataGroup中的元素均匀分布在圆周上，并通过按钮动态添加元素。文章还提供了SimpleItemRenderer的实现，用于展示DataGroup中的数据。

2、 ss.mxml



<?xml version="1.0" encoding="utf-8"?>
<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/halo"
			   xmlns:local="*"
			   creationComplete="init();">

		<fx:Script>
			<![CDATA[
				import mx.collections.ArrayCollection;

				private var dataSource:ArrayCollection = new ArrayCollection();

				public function init():void{
					for(var i:int = 0; i < 10; i++){
						dataSource.addItem(i);
					}
					dataGroupID.dataProvider = dataSource;
				}

			]]>
		</fx:Script>

		<s:DataGroup id="dataGroupID" width="100%" height="100%" itemRenderer="SimpleItemRenderer">
			<s:layout>
				<local:CircularLayout />  <!--自定义布局类:CircularLayout.其只在DataGroup初始化的时候执行一次-->
			</s:layout>
		</s:DataGroup>

		<mx:Button label="点击添加按钮" click="dataSource.addItem(dataSource.length)" />

</s:Application>

2、 SimpleItemRenderer.mxml


<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/halo">

	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<s:Button label="{this.data}"/>

</s:ItemRenderer>

3、CircularLayout.as


package{
	import mx.core.ILayoutElement;
	import spark.layouts.supportClasses.LayoutBase;

	public class CircularLayout extends LayoutBase{
		override public function updateDisplayList(w:Number, h:Number):void{
			super.updateDisplayList(w, h);
			var layoutElement:ILayoutElement;
			if(!target){
				return;
			}
			var count:uint = target.numElements;    //当前dataGroup容器里的所有组件的总数量
			var w2:Number = target.width;     //当前浏览器的宽度
			var h2:Number = target.height;    //当前浏览器的高度
			for(var i:int = 0; i < count; i++){
				layoutElement = target.getElementAt(i);
				if (!layoutElement || !layoutElement.includeInLayout){
					continue;
				}
				layoutElement.setLayoutBoundsPosition(i * 100, i + 350);    //对每一个组件进行遍历及定位（分别表示x、y轴）（核心啊）
			}
		}

	}

}