java - 用于设置 SeparatorMenuItem 颜色的 CSS？

Question

我想改变 SeparatorMenuItem 的颜色在我的程序中。什么 CSS 代码可以让我改变它的颜色？我在 JavaFX CSS Reference Guide 中找不到任何相关信息.

Answer 1

对于其他控件，这个问题已经回答了很多次。但是你去吧:

遵循代码

当你添加一个SeparatorMenuItem时，你可以看到源代码here或直接从您的 IDE。

public SeparatorMenuItem() {
    super(new Separator(Orientation.HORIZONTAL), false);
    getStyleClass().add(DEFAULT_STYLE_CLASS);
}

它用作DEFAULT_STYLE_CLASS，separator-menu-item，并扩展了CustomMenuItem，后者扩展了MenuItem， 不是控件，所以这个样式类可能不是我们需要修改的。

当您单击 Menu 节点时，它会显示一个带有样式类 context-menu 的 ContextMenu，其中包含菜单项、用于渲染内容是 ContextMenuSkin，每个元素使用一个 ContextMenuContent.MenuItemContainer:

Container responsible for laying out a single row in the menu - in other words, this contains and lays out a single MenuItem, regardless of it's specific subtype.

元素被添加到 ContextMenuContent.MenuBox(一个 VBox)，但这个容器没有特定的样式类。

SeparatorMenuItem 的内容节点是一个Separator，一个样式类为separator 的节点，具有SeparatorSkin > 作为皮肤，它只渲染一个 line，一个以 line 作为样式类的区域。

最后，我们可以做这样的事情来改变 SeparatorMenuItem 颜色:

.context-menu > * > .separator > .line {
    -fx-border-color: red;
    -fx-border-insets: 0;
}

如您所见，主要问题是找出场景图中正在渲染的真实节点及其父节点。

打印这个也很有帮助:

menu.setOnShown(e -> {
        Node node = separatorMenuItem.getContent();
        do {
            System.out.println("Node: " + node);
            node = node.getParent();
        } while (node != null);
    });

它会打印出如下内容:

Node: Separator@296d4a5a[styleClass=separator]
Node: ContextMenuContent$MenuBox@14793a99
Node: ContextMenuContent[id=null, styleClass=context-menu]
Node: PopupControl$CSSBridge[id=null, styleClass=context-menu]
Node: Pane@2decd2c5[styleClass=root popup]

使用 ScenicView

从 here 下载适合您平台的 JDK 11 版本，并在运行您的应用程序时，从 scenicview/bin/scenicview 启动它:

虽然在显示菜单内容时您会看到完整的场景图层次结构，如上图所示，但在这种情况下存在一个主要问题，阻止您单击任何节点来检查其内容和样式类，无需关闭菜单。

因此，虽然它在这种情况下无济于事，但它始终是一个非常有用的工具。

检查modena.css

Modena 是默认应用于所有内置 JavaFX 控件的主题。

或者here ，或者从您的 IDE 中，您可以找到应用于控件的确切样式。

在这种情况下:

.context-menu .separator:horizontal .line {
    -fx-border-color: -fx-box-border transparent transparent transparent;
    -fx-border-insets: 1 0 0 0;
}

现在您可以根据需要更改它。请注意，它与我们通过源代码找到的内容完全匹配。