0

在 Flex 中，火花皮肤很棒。自定义组件需要几分钟时间。Mx 组件非常难以处理。我花了 2 天的时间来了解如何更改菜单栏组件中菜单的背景。当我找到完成它的正确方法时（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>

有人可以解释为什么菜单背景仍然是白色的吗？

4

4 回答 4

3

菜单栏会渲染一个列表...只需在 CSS 上设置一种适用于列表的样式（它不会使用 ctrl+bar 显示）。

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

只是它！这很容易：D

于 2012-12-27T20:32:28.627 回答
1

您可以为此更改CSS...

以下是创建 CSS 并在当前项目中使用的链接...

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

选择菜单栏并开始创建您自己的风格。为其他组件设置样式也很有用..

祝你今天过得愉快 - ：）

于 2012-05-25T11:49:27.143 回答
0

这是我带来的解决方案。

我创建了一个自定义 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;

    }

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

谢谢！

于 2012-05-28T22:21:21.750 回答
0

我想，我找到了更好的选择。

我没有在我的应用程序中使用 mx 列表。所以我只是用这个：

mx|List
{
    backgroundColor:#666666;
}

无论如何，我认为您可以使用继承将此 CSS 仅用于您的菜单。

于 2012-07-13T21:43:40.583 回答