TitleWindow 顶部的 Flex 4 组件

Question

我有带有一些 ui 元素的 Flex s:Group，我希望它始终（！）位于我的应用程序内的任何组件之上，包括 s:TitleWindow（对话框）。 如何使用 Flex 4 实现它？

提前致谢！

Answer 1

在应用程序创建完成事件后，在 systemManager.rawChildren 中添加您的顶级组件。往下看：

<?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" 
               creationComplete="application_creationCompleteHandler(event)"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            import mx.events.CloseEvent;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;

            protected function application_creationCompleteHandler(event:FlexEvent):void
            {
                panel.width = width;
                panel.height = 300;
                systemManager.rawChildren.addChild(panel);
            }

            protected function addPopup():void
            {
                PopUpManager.addPopUp(titleWin, this, true);
                PopUpManager.centerPopUp(titleWin);
            }

            protected function button_clickHandler(event:MouseEvent):void
            {
                addPopup();
            }

            protected function titleWin_closeHandler(evt:CloseEvent):void 
            {
                PopUpManager.removePopUp(evt.currentTarget as UIComponent);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:Panel id="panel" backgroundColor="0x00ff00" alpha="0.9" title="Panel">
            <s:layout>
                <s:VerticalLayout paddingLeft="50" horizontalAlign="left" verticalAlign="middle" />
            </s:layout>
            <s:Button id="btn" width="200" height="100" label="create popup" 
                      click="button_clickHandler(event)" /> 
        </s:Panel>

        <s:TitleWindow id="titleWin"
                       title="Spark TitleWindow"
                       close="titleWin_closeHandler(event);"
                       width="300">
            <s:layout>
                <s:VerticalLayout paddingLeft="10" paddingRight="10"
                                  paddingTop="10" paddingBottom="10" />
            </s:layout>
            <s:Label text="Popup window"
                     fontSize="24"
                     width="100%"/>
        </s:TitleWindow>
    </fx:Declarations>
</s:Application>

Answer 2

您应该使用mx.managers.PopUpManager 类。它提供了一个简单的界面来处理高于任何其他内容的显示。

您可以编写自己的接口来封装PopUpManager 接口，让您有机会再次将所有“始终在顶部”组件置于顶部，即使您添加另一个应该出现在后面的弹出窗口也是如此。

简单示例：

public final class AlwaysOnTopPopUpManager {

    private static var alwaysOnTopDisplayObjects:Array;

    public static function addAlwaysOnTopObject(displayObject:IFlexDisplayObject):void
    {
        alwaysOnTopDisplayObjects = alwaysOnTopDisplayObjects || [];

        if (alwaysOnTopDisplayObjects.indexOf(displayObject) == -1)
        {
            alwaysOnTopDisplayObjects.push(displayObject);
            arrange();
        }
    }


    public static function removeAlwaysOnTopObject(displayObject:IFlexDisplayObject):void
    {
        if (alwaysOnTopDisplayObjects)
        {
            var index:int = alwaysOnTopDisplayObjects.indexOf(displayObject);

            if (index != -1)
            {
                alwaysOnTopDisplayObjects.splice(index, 1);
            }
        }
    }


    // uses the same interface as mx.managers.PopUpManager
    public static function addPopUp(window:IFlexDisplayObject, parent:DisplayObject, modal:Boolean = false, childList:String = null, moduleFactory:IFlexModuleFactory = null):void
    {
        mx.managers.PopUpManager.addPopUp(window, parent, modal, childList, moduleFactory);
        arrange();
    }


    private static function arrange():void
    {
        for each (var popup:IFlexDisplayObject in alwaysOnTopDisplayObjects)
        {
            mx.managers.PopUpManager.bringToFront(popup);
        }
    }

该类包含一个对象列表，以显示在任何其他内容之上。每次将对象添加到该列表或弹出窗口时，都会调用 arrange() 方法并将所有已注册的对象再次置于前面。

Answer 3

如果您的所有元素都在同一个 MXML 文件中，您只需将 s:Group 元素放在文件底部作为文件的最后一个元素。

如果您的视图更动态地连接，那么您可以使用以下方式强制其索引：

var topIndex:int = myParentView.numChildren - 1;
myParentView.setChildIndex(myGroupElement, topIndex);

如果引用您的 s:Group 或其 ID，则在 myGroupElement 处。

在执行此代码时，myGroupElement 必须已经是 myParentView 的子代。

如果您的s:Group 元素只是偶尔显示，您可能会对Popups 感兴趣。