更改MenuBar菜单中的背景色(Flex4.6)

Question

在Flex中，spark skin很棒。自定义组件需要几分钟时间。Mx组件非常难以处理。我花了两天的时间来理解如何在菜单栏组件中改变菜单的背景。当我找到实现它的正确方法( http://goo.gl/Tu5Wc )时，它根本不起作用。我创建了一个非常简单的应用程序来演示我的问题：

<?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" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            private var menubarXML:XMLList =
                <>
                    <menuitem label="Client">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                    <menuitem label="Others">
                        <menuitem label="Profile"/>
                        <menuitem label="Documents"/>
                    </menuitem>
                </>;
            [Bindable]
            public var menuBarCollection:XMLListCollection;
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                menuBarCollection = new XMLListCollection(menubarXML);

            }

        ]]>
    </fx:Script>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/mx";
        mx|MenuBar.myStyle {
            backgroundColor: #ff0000;
        }
    </fx:Style>
    <mx:MenuBar height="30" labelField="@label" dataProvider="{menuBarCollection}" menuStyleName="myStyle"/>
</s:Application>

有人能解释一下为什么菜单背景还是白色的吗？

Answer 1

菜单栏会呈现一个列表...只需在CSS上设置一个可以处理列表的样式(它不能在ctrl+bar中显示)。

mx|MenuBar{
    color:#BBBBBB;
    backgroundColor: #333333;
    contentBackgroundColor: #333333;
}

就是这样！这很简单:D

Answer 2

您可以为此更改CSS ...

下面是创建CSS并在当前项目中使用它的链接…

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

选择Menubar并开始创建您自己的样式。它对设计另一个组件的样式也很有用。

祝您有愉快的一天-- :)

Answer 3

这是我提出的解决方案。

我创建了一个自定义MenuItemRenderer，并在updateDisplayList函数中添加了以下行：

        this.graphics.clear();
        this.graphics.beginFill(BACKGROUND_COLOR);
        this.graphics.drawRect(-1, -1, unscaledWidth +1, unscaledHeight+2);
        this.graphics.endFill();

        if (Menu(listData.owner).isItemHighlighted(listData.uid)) { 
            this.graphics.clear();
            this.graphics.beginFill(0xb4c5d6);
            this.graphics.drawRect(0,0, unscaledWidth -2, unscaledHeight-1);
            this.graphics.endFill();        
        }

第一部分是背景，第二部分是翻转效果。

然后，我简单地扩展了标准MenuBar组件并覆盖了getMenuAt函数，如下所示：

    override public function getMenuAt(index:int):Menu
    {
        var menu:Menu = super.getMenuAt(index);
        menu.itemRenderer = new ClassFactory(CustomMenuItemRenderer);
        return menu;

    }

这可能不是最好的解决方案，但它是我唯一能想到的。我想听到任何人可以让它变得更好。

谢谢!