是否可以在 javaFx 中为 Node 对象添加 css 类？答案

【问题标题】：Is possible to add css class for a Node object in javaFx?是否可以在 javaFx 中为 Node 对象添加 css 类？
【发布时间】：2016-04-29 11:48:47
【问题描述】：

我想制作一个带有可拖动节点的窗格。当我选择某个节点时，我想为这个节点绘制一些边框。实际上，我已经完成了，但我的问题是，我的解决方案从 Node.js 中删除了所有其他样式。这是非常丑陋的解决方案。我想通过添加 css 类来做到这一点，但我绝对不知道该怎么做。当节点的焦点丢失时，我想删除 css 类。我是 JavaFx 的新手。我的代码如下：

public void addSelectionControlToNode(Node node) {
node.addEventFilter(MouseEvent.MOUSE_CLICKED, (MouseEvent e) -> {
    if (e.isControlDown()) {
        if (selection.contains(node)) {
            selection.remove(node);
        } else {
            selection.add(node);
            //problematic area below
            node.setStyle("-fx-border-width: 2;
               -fx-border-color: gray; -fx-border-style: solid;");
           //problematic area end
        }
    } else {
        selection.clear();
        selection.add(node);
    }
    System.out.println(selection.size());
});

}

我看过很多关于如何在 javaFx 中使用 css 的教程，但我不明白如何解决我的问题。

【问题讨论】：

标签： java css javafx

【解决方案1】：

使用CSS Pseudoclass。

给所有节点你要拖一些固定的样式类：

private static final String DRAGGABLE_CLASS = "draggable" ;

// ...

Node node = ... ;
node.getStyleClass().add(DRAGGABLE_CLASS);

现在定义一个“选定的”伪类：

private static final PseudoClass SELECTED_PSEUDO_CLASS =
    PseudoClass.getPseudoClass("selected");

然后做：

public void addSelectionControlToNode(Node node) {
    node.addEventFilter(MouseEvent.MOUSE_CLICKED, (MouseEvent e) -> {
        if (e.isControlDown()) {
            if (selection.contains(node)) {
                selection.remove(node);
                node.pseudoClassStateChanged(SELECTED_PSEUDO_CLASS, false);
            } else {
                selection.add(node);
                node.pseudoClassStateChanged(SELECTED_PSEUDO_CLASS, true);
            }
        } else {
            selection.clear();
            selection.add(node);
            node.pseudoClassStateChanged(SELECTED_PSEUDO_CLASS, true);
        }
        System.out.println(selection.size());
    });
}

现在您可以定义一个外部 CSS 文件：

.draggable {
    /* styles for all draggable nodes */
}
.draggable:selected {
    -fx-border-width: 2;
    -fx-border-color: gray; 
    -fx-border-style: solid;
}

【讨论】：