Question

我有一个看起来像这样的menuBar：

<mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" color="black" fillColors="[green, green]" itemClick="menuItemClickHandler(event);"
        dataProvider="{menuBarCollection}" change="onTopSelection(event)" />

我的menuBar的XML如下所示：

            <menuitem label="Vision">
        </menuitem>
        <menuitem label="About">
            <menuitem label="Our Team"/>
            <menuitem label="Services"/>
        </menuitem>

        <menuitem label="Contact Us">

        </menuitem>

正如您所见，有Vision和Contact Us，但eventHandler不知道何时点击这两个。实现eventHandler的正确方法是什么？

Answer 1

您的代码中有两个事件处理程序。 onTopSelection和menyItemClickHandler。单击任何内容时将调度change事件。只有在单击子菜单项时才会调度itemClick事件。

我将您与我们分享的代码转换为正在运行的示例。如果您在调试模式下运行它，您将看到说明我上面所说的内容的痕迹：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                 creationComplete="application1_creationCompleteHandler(event)">


    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;

            [Bindable] 
            public var menuBarCollectionSource : XML = 
            <menu>
            <menuitem label="Vision">
            </menuitem>
            <menuitem label="About">
                <menuitem label="Our Team"/>
                <menuitem label="Services"/>
            </menuitem>
            <menuitem label="Contact Us">
            </menuitem>
            </menu>;

            [Bindable] 
            public var menuBarCollection : XMLListCollection = new XMLListCollection();

            public function menuItemClickHandler(event:MenuEvent):void{
                trace('menu item clicked ' + event.label);
            }

            protected function onTopSelection(event:MenuEvent):void
            {
                trace('change to ' + event.label);
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection.source = menuBarCollectionSource.menuitem as XMLList;
            }

        ]]>
    </mx:Script>


    <mx:MenuBar id="myMenuBar" labelField="@label" cornerRadius="8" 
                color="black" fillColors="[green, green]" 
                itemClick="menuItemClickHandler(event);"
                dataProvider="{menuBarCollection}" change="onTopSelection(event)" />  

</mx:Application>

由于您对实现事件处理程序的正确方法有疑问，因此本示例显示我实现了原始代码中的处理程序。

Answer 2

@SuperString你并没有真正按照预期使用MenuBar。正如Flextras所指出的那样，itemClick事件只会触发子菜单点击。

将其想象为典型Windows应用程序中的菜单栏。单击文件菜单会显示一个子菜单，然后只有当您单击子菜单中的某个项目时才会发生实际情况。我并不是说你想要做的事情是错误的，只是控件的设计没有考虑你的特定用途。

一个建议是根据需要使用带有PopupMenu的ButtonBar进行子选择。它不会像您必须以不同于ButtonBar的方式处理菜单中的事件一样干净。

理想情况下，您想要的是“嵌套导航菜单”组件，但我没有看到任何具有该功能的现有组件。也许Flextras要建造什么？

Answer 3

非常感谢您的建议！

在你的帮助下，我添加了一些将从menuBar的子元素启动的事件，但方式略有不同：

首先，我在菜单中添加了一个eventlistener：

（假设我有一个名为_myMenuBarName的mx：菜单栏）

_myMenuBarName.addEventListener(MenuEvent.ITEM_CLICK, eventsLaucher);

然后我创建了一个函数来决定它应该启动哪个事件，具体取决于menuBarItem的标签

    private function eventsLauncher(pEvent:MenuEvent):void 
            {
            switch(pEvent.label)
 {
            case "Our Team":
                         {
                //do something
                break;

                case "Vision":
                    //do something else
                break;              
            }
}

弯曲菜单栏点击事件

3 个答案: