更改MenuBar菜單（Flex 4.6）中的背景顏色

Question

在Flex中，火花皮膚很棒。 自定義組件需要幾分鍾。 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

菜單欄itens呈現一個List ...只需在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

選擇菜單欄，然后​​開始創建自己的樣式。 也可以設置其他組件的樣式。

祝你今天愉快 - ：）

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;

    }

可能這不是最好的解決方案，但這是我唯一能想到的解決方案。 我想聽聽任何可以做得更好的人的信。

謝謝！

Answer 4

我認為我找到了一個更好的選擇。

我沒有在我的應用程序中使用MX列表。 所以我只是用這個：

mx|List
{
    backgroundColor:#666666;
}

無論如何，我認為您可以使用繼承僅將此css用於菜單。