Flex 3 修改显示层次关系

 在某种情况下我们会需要实现如下应用情景：有两个图片或者是控件重叠，然后当我们的鼠标滑过或者是点击的时候某一个图片或控件时，被触发的图片或者会显示在顶层，以免被被遮住。

一般情况下，MXML和HTML,都是默认按照代码出现的先后顺序来排列控件的层次的，问题是我们一般会在运行的时候动态变换图片或控件的层次的，这样就不能依靠代码出现的先后顺序了，HTML是通过CSS样式的z-index来控制，但是在Flex里好像没有相对应的属性或者是方法来控制控件的层次先后关系。

不过我们可以自己手工用代码实现。

 

我们先来看一些类的继承关系：

 

Application   LayoutContainer  Container  UIComponent

 

而Container，UIComponent 都实现了IChildList接口管理容器中子项的方法。

所以可以通过IChildList定义的setChildIndex和numChildren属性来实现控件的层次排列关系。

 

演示代码如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.core.UIComponent; private function mouseOverHandler(event:MouseEvent):void{ this.setChildIndex(event.currentTarget as DisplayObject,this.numChildren-1); } ]]--> </mx:Script> <mx:Image mouseOver="mouseOverHandler(event)" x="42.85" y="40.6" source="images/cupgreen.png"/> <mx:Image mouseOver="mouseOverHandler(event)" x="132.8" y="93.2" source="images/cupempty.png"/> <mx:DateChooser mouseOver="mouseOverHandler(event)" x="456.6" y="118.6" /> <mx:DateChooser mouseOver="mouseOverHandler(event)" x="370.4" y="142.3"/> </mx:Application>