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。

更改MenuBar菜单中的背景颜色（Flex 4.6）

4 个答案: