JavaFx菜单项快捷键，Javafx CSS

Question

我尝试将JavaFX菜单项标签添加图标，但菜单项标签和加速键标签的图标都重复出现了。下面是说明这个问题的图片:

以下是JavaFX CSS代码：

.menu-item > .label {

}

#miRestore .label{
    -fx-graphic: url("/img/Upload_16x16.png");
}
#miBackup .label {
    -fx-graphic: url("/img/Flash%20Disk_16x16.png");
}
#miClose .label {
    -fx-graphic: url("/img/Delete_16x16.png");
}

#miSettings .label {
    -fx-graphic: url("/img/Settings_16x16.png");
}

#miRegistre . label{
    -fx-graphic: url("/img/Help_16x16.png");
}

- abdou amer

---

显然，MenuItem 内部使用第二个 Label 来保存其加速键文本。将您的选择器更改为使用 .label:first-child 可能会起作用。 - VGR

@VGR，很不幸，这对我根本没有用。甚至菜单图标也消失了。 - abdou amer

一种可靠的方法是将您的MenuItem图形设置为具有自定义样式类的节点，并在CSS中使用它，而不是（或除了）.label。 - VGR

根据JavaFX CSS文档，“不支持结构伪类”。这就解释了为什么:first-child无法工作。 - jewelsea

Answer 1

我已经找到了一个可靠的解决方案： 在Scene Builder / FXML（无论您喜欢哪个），为您想要添加图标的每个菜单项附加一个样式类（而不是id）。 现在，在menubar中添加一个样式表，其中包含以下CSS，用于具有图标的每个项目：

.yourClassName > .label{
    -fx-graphic: url("yourImageUrl");
}

在CSS文件末尾添加以下内容以删除所有第二张图片：

.context-menu .accelerator-text{
    -fx-graphic: none;
}

这个操作是将每个加速键文本的-fx-graphic设置为“none”。因此，它基本上再次删除了图像。

现在，您只会在菜单项文本前面看到图标，而不是加速键文本。 为了让您具体了解如何完成此操作，我为您制作了一个小例子： 这是将以下CSS样式表添加到我的菜单栏以及添加到我的菜单项的相应CSS样式类的结果：

.newIcon > .label{
    -fx-graphic: url("px16/file.png");
}
.openIcon > .label{
    -fx-graphic: url("px16/folderEmpty.png");
}
.closeIcon > .label{
    -fx-graphic: url("px16/minus.png");
}
.saveIcon > .label{
    -fx-graphic: url("px16/save.png");
}
.saveAsIcon > .label{
    -fx-graphic: url("px16/folder.png");
}
.quitIcon > .label{
    -fx-graphic: url("px16/error.png");
}
.context-menu .accelerator-text{
    -fx-graphic: none;
}

这是我在StackOverflow上的第一个回答，希望对某些人有所帮助。

- stefan croes