JavaFX CSS 标签

Question

我正在尝试创建一个框列表，用户可以使用鼠标进行选择，当选择一个框时，它会用一种颜色突出显示它，而所有其余的框都会变成白色。 javafx 中是否有与 css 标签 :target 等效的内容，就像与 :focus(:focused) 等效的内容一样，或者我是否必须以自己的方式处理列表中的元素选择？

Answer 1

没有内置的 target 伪类，但有一个 API 可用于创建您自己的 CSS PseudoClass objects .

这是一个简单的例子:

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SelectableBoxes extends Application {

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

    private ObjectProperty<Pane> selectedBox = new SimpleObjectProperty<>();


    @Override
    public void start(Stage primaryStage) {
        VBox container = new VBox(5);
        container.setPadding(new Insets(20));

        int numBoxes = 5 ;
        for (int i = 0 ; i < numBoxes; i++) {
            container.getChildren().add(createBox());
        }
        ScrollPane scroller = new ScrollPane(container);
        Scene scene = new Scene(scroller, 400, 400);
        scene.getStylesheets().add("selectable-boxes.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Pane createBox() {
        Pane pane = new Pane();
        pane.setMinSize(50, 50);
        pane.getStyleClass().add("box");

        pane.setOnMouseClicked(e -> selectedBox.set(pane));

        selectedBox.addListener((obs, oldSelection, newSelection) -> 
            pane.pseudoClassStateChanged(SELECTED_PSEUDOCLASS, newSelection == pane));

        return pane ;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

与相应的CSS文件selectable-boxes.css:

.box {
    -fx-border-width: 1 ;
    -fx-border-color: black ;
}
.box:selected {
    -fx-background-color: blue ;
}