Flex中改变panel的叠放层次

12:00:15

 

      Flex中默认先定义的对象在下层，后定义的对象是在上层。这里不过是通过静态还是动态方式建立的控件，均是按照后者在前的原则来设置显示的层次的。

     Flex的调整函数为setChildIndex(displayObject,ind)，可以用来调整容器中所有控件或者是子容器的层次顺序，具体的使用方法为：Container.setChildIndex(child,index)，其中Container为容器，child为容器的对象，index是要设置的层次号(底层为0，最上层为容器中所有对象数目-1)。

 

设置容器中某一对象的层次深度：
1、置顶：
   myContainer.setChildIndex(child,myContainer.numChildren - 1)

2、置底：
   myContainer.setChildIndex(child,0)

3、将childA置于childB的前面：
   myContainer.setChildIndex(childA,myContainer.getChildIndex(childB))

PS:使用setChildIndex后，容器中其他对象会根据当前插入对象的深度进行相应的调整位置。

以下是一个设置panel叠放层次的例子：

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600"> <mx:Script> <!--[CDATA[ private function dragControl(pl:Panel):void { //设置panel，允许其拖动 pl.isPopUp = true; } private function setFront(evt:MouseEvent):void { //设置panel置顶 this.setChildIndex(evt.currentTarget as DisplayObject,(this.numChildren-1)); } ]]--> </mx:Script> <mx:Panel id="ml" title="mypanel_1" y="20" width="320" height="180" initialize="dragControl(ml)" click="setFront(event)" dropShadowVisible="false"> <mx:Label text="test panel! " /> </mx:Panel> <mx:Panel id="ml2" title="mypanel_2" x="100" y="80" width="320" height="180" initialize="dragControl(ml2)" click="setFront(event)" dropShadowVisible="false"> <mx:Label text="test panel!" /> </mx:Panel> <mx:Panel id="ml3" title="mypanel_3" x="200" y="160" width="320" height="180" initialize="dragControl(ml3)" click="setFront(event)" dropShadowVisible="false"> <mx:Label text="test panel!" /> </mx:Panel> </mx:Application>

 

效果如下图：