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

 

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

一般情况下，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>

 

演示的地址：

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

效果图：