更改菜单栏中顶级项目的突出显示 Flash Builder 4.6

Question

我受雇帮助构建 flex 页面，并且在学习 flash builder 三天后，我尝试改变顶级项目在菜单栏中突出显示的方式。目前它是默认设置，因此当鼠标悬停时，这些项目的颜色会变为蓝色。

我想要做的是使文本在鼠标悬停时带有下划线，而不是将其颜色更改为蓝色。

尝试通过 CSS 更改它，但唯一更改的是子菜单项，而不是顶层：

主应用程序中负责保存在 BorderContainer 中的菜单栏的代码：

<mx:MenuBar id="mbPrimaryMenu" height="40" labelField="@label"
dataProvider="{primaryMenuItems}" change="mbPrimaryMenuChangeHandler(event)"/>

负责格式化我认为是整个菜单栏的 CSS（包括顶级元素）：

#mbPrimaryMenu {
    chromeColor: #333333;
    borderVisible: true;
    borderColor: #000000;
    borderAlpha: 0;
    borderStyle: solid;
    borderWeight: 2;
    color: #FFFFFF;
    contentBackgroundColor: #333333;
    contentBackgroundAlpha: 0.8;
    rollOverColor: #AAAAAA;
    itemRollOverColor: #FF0000;

我该怎么做？ CSS，MenuBarItemRenderer？ 当鼠标滑过其中一个元素时，我在哪里寻找菜单栏突出显示其元素的方式？

Answer 1

要使菜单栏的第一级文本带下划线，只需在添加 MXML 组件的位置设置 textDecoration 属性。那就是：

<mx:MenuBar width="100%" height="20" textDecoration="underline" dataProvider="{myData}"/>

要更改菜单栏的顶级背景颜色，您需要复制并编辑默认外观。这可能看起来令人生畏，但实际上很容易做到。 （如果您以前从未创建过自定义皮肤，请在此处查看我的回答以帮助您入门：Add search icon inside spark TextInput in Flex）

您可以在 MXML 中应用皮肤，或者由于您使用的是 CSS，您可以使用以下方法在 CSS 中应用它们：

mx|MenuBar {
backgroundSkin: ClassReference("com.mycompany.views.components.skins.MyButtonSkin");
   /* changes background color at top level*/
itemSkin: ClassReference("com.mycompany.views.components.skins.MyMenuItemSkin"); 
   /* changes background HOVER color at top level of menu bar */
}

您可以从 ButtonSkin 的默认外观创建外观 MyButtonSkin（使用您自己的名称），并从默认外观 MenuItemSkin 创建 MyMenuItemSkin（使用您自己的名称）。但是，您只需要 MyMenuItemSkin 即可更改菜单栏顶层的悬停颜色。

在您的皮肤文件夹中拥有MyMenuItemSkin 皮肤后，编辑包含填充的第 1 层部分。在这里，您可以执行以下操作：

<!-- layer 1: fill; effects main level of menubar only -->
<s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="up,disabled" >
    <s:fill> 
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.over="0xFF0000" 
                             color.down="0x00FF00"
                             alpha.over="0.8" alpha.down="1" 
                             />
            <s:GradientEntry color.over="0xAA0000" 
                             color.down="0x00AA00"
                             alpha.over="0.8" alpha.down="1" 
                             />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

保存并运行程序。然后根据需要调整颜色。