Flex中如何改变图片或控件的显示层次关系

 

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

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

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

 

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

 

Application   LayoutContainer  Container  UIComponent

 

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

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

 

演示代码如下：

import mx.core.UIComponent;

private function mouseOverHandler(event:MouseEvent):void{

this.setChildIndex(event.currentTarget as DisplayObject,this.numChildren-1);

}

]]>

 

演示的地址：

http://www.ilinker.net.cn/flexsameple/displayobjectindex/displayobjectindex.html

效果图：